跨域 JSONP

跨域安全限制是对浏览器来说的，服务器端是不存在跨域安全限制的

所以跨域的一种处理方式是，把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端

同源策略：

所谓同源，即协议、域名、端口相同。

基于安全考虑，当前域不能访问其他域的东西

JSONP（JSON with padding）就是利用<script>的src来实现跨域获取数据的

JSONP原理简单的说，就是动态创建<script>标签，然后利用<script>的src不受同源策略约束来跨域获取数据

JSONP由两部分组成：回调函数和数据

回调函数是当响应到来时应该在页面中调用的函数，回调函数名一般在请求中指定

数据是传入回调函数中的JSON数据

例：

动态创建<script>标签，设置其src，回调函数在src中设置

var script = document.createElement("script");
script.src = "https://localhost:8080&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来操作数据

function handleResponse(response){
    // 对response数据进行操作代码
}

虽然JSONP用起来方便，但也存在一些问题：

从其他域中加载代码执行，如果其他域不安全，很可能在响应中夹带着一些恶意代码，而此时除了完全放弃JSONP调用外，没有办法追究。

要确定JSONP请求是否成功并不容易，H5给<script>元素新增了一个onerror事件处理程序，但是兼容性很不理想。

JQuery封装JSONP

$.ajax({
        url : "https://localhost:8080",
        type : "GET",
        dataType : "jsonp", // 指定返回的数据类型，设置为JSONP方式
        jsonpCallback: 'handleResponse', //指定回调函数名
        success: function(response, status, xhr){ //默认回调函数名
            console.log('状态为：' + status + ',状态是：' + xhr.statusText);
            console.log(response);
        }
});

JSONP不支持POST方式

服务算必须设置允许跨域请求