前端跨域 [记录]

参考：https://mp.weixin.qq.com/s/2B65Ag8XkBmxlkuqpoW9gg

一般的，只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用

  CORS 与 JSONP 的对比

1. CORS 除了 GET 方法外，也支持其它的 HTTP 请求方法如 POST、 PUT 等。

2. CORS 可以使用 XmlHttpRequest 进行传输，所以它的错误处理方式比 JSONP 好。

3. JSONP 可以在不支持 CORS 的老旧浏览器上运作。

 

使用 jQuery 集成的 $.ajax 实现 JSONP 跨域调用

// 回调函数

function jsonpCallback(data) {

    console.log("jsonpCallback: " + data.name)

}

$("#submit").click(function() {

    var data = {

        name: $("#name").val(),

        id: $("#id").val()

    };

    $.ajax({

        url: 'http://localhost:3001/ajax/deal',

        data: data,

        dataType: 'jsonp',

        cache: false,

        timeout: 5000,

        // jsonp 字段含义为服务器通过什么字段获取回调函数的名称

        jsonp: 'callback',

        // 声明本地回调函数的名称，jquery 默认随机生成一个函数名称

        jsonpCallback: 'jsonpCallback',

        success: function(data) {

            console.log("ajax success callback: " + data.name)

        },

        error: function(jqXHR, textStatus, errorThrown) {

            console.log(textStatus + ' ' + errorThrown);

        }

    });

});

这里一定要注意 data 中字符串拼接，不能直接将 JSON 格式的 data 直接传给回调函数，否则会发生编译错误： parsererror Error: jsonpCallback was not called。

 

使用 <script> 标签原生实现 JSONP

<script src = 'http://localhost:3001/ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&_=1473164876032'></script>

function jsonpCallback(data) {

    console.log("jsonpCallback: "+data.name)

}