徐向博 / Imin.

ajax跨域笔记
作者:Imin 时间:2018-06-11 分类: 前端

谈到跨域,通常都是先想到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);
?>


本文标签: 跨域 ajax

天津网站建设感谢博主的分享,收藏了,会常来的 2018-09-10 14:21
广安网站建设支持博主 2018-07-31 11:26
炸鸡店加盟感谢分享 收藏了 2018-06-20 10:31