错误描述:
在使用ajax调用api接口的时候,报错如下:
Access to XMLHttpRequest at 'http://xxx.com/api/xxx' fromorigin 'null' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
错误代码如下:
$(function() {
$.post('http://xxx.com/api/xxx', {}, function(res) {
console.log(res.data)
});
});
错误形成分析:
资源跨域问题
解决方案:
方法一:
ajax包括GET和POST请求,dataType要写jsonp格式。
$(function() {
$.ajax({
url: 'http://xxx.com/api/xxx',
type: 'POST',
dataType: 'jsonp', // 跨域读取数据
success: function(res) {
console.log(res)
}
});
});
方法二:
在php接口的脚本中加入
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
路径:

操作:
1、在class类上面加上
header("Access-Control-Allow-Methods: GET, POST");
header('Access-Control-Allow-Origin: *');
2、把初始化操作的第一句代码注释掉,不进行判断,如下图所示:

总结:
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
具体参考:
https://www.runoob.com/json/json-jsonp.html
当使用Ajax调用API接口时遇到跨域错误,可通过两种方式解决:1. 设置dataType为jsonp;2. 在PHP接口脚本中添加允许跨域的HTTP头。Jsonp是一种跨域数据交互协议,允许网页从其他域名获取数据。

被折叠的 条评论
为什么被折叠?



