ajax跨域笔记
谈到跨域,通常都是先想到jsonp,而jquery中封装了jsonp也很方便,不过这里有一些小坑,做一下笔记。
首先,接口代码如下:
<?php
$arr = array(
"data" => "恭喜,跨域成功!"
);
echo json_encode($arr);
?>
直接在地址栏中访问接口是可以正常返回数据的,但是使用ajax时会报 No 'Access-Control-Allow-Origin' 的错,表示访问跨域。
使用jquery.ajax中封装的jsonp可以跨域访问,代码如下:
$.ajax({
type: "post",
dataType: 'jsonp',
url: 'https://www.xuxiangbo.com/api/test/ky/',
success: function(res){
console.log(res);
}
});
此时,是可以从接口获取数据的,但是控制台会报错:
?callback=jQuery2140507…_1528875821228&_=1528875821229:1 Uncaught SyntaxError: Unexpected token :
原因是后台返回的json数据,没有添加callback,导致$.ajax参数错误,无法进入success回调。
我的解决方法是,修改后台接口,代码如下:
<?php
$callback = $_GET['callback'];
$arr = array(
"data" => "恭喜,跨域成功!"
);
echo $callback.'('.json_encode($arr).')';
?>
结束。
----------2018.06.13补充----------
在接口中添加header('Access-Control-Allow-Origin: http://www.baidu.com');可以允许白名单域名跨域,而不需要使用jsonp。
注意协议,http和https也会跨域
<?php
header('Access-Control-Allow-Origin: https://www.xuxiangbo.com');
$arr = array(
"data" => "恭喜,跨域成功!"
);
echo json_encode($arr);
?>