jsonp 跨域与 cors 跨域

同源策略 Same Origin Policy

简而言之，就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互，这包括共享和传递变量等。cookie的传递也是遵从同样策略。

JSONP原理与实现
首先在客户端注册一个callback,然后把callback的名字传给服务器。此时，服务器先生成 JSON数据。然后以JavaScript 语法的方式，生成一个function,function名字就是传递上来的参数jsonp。

使用 ajax 请求获得 json数据

语法

jQuery.getJSON(url,data,success(data,status,xhr))

从 test.js载入 JSON数据并显示 JSON 数据中一个 name 字段数据

$.getJSON("test.js",function(json){
  alert("JSON Data: " + json.users[3].name);
});

还可以附加参数

$.getJSON("test.js",{ name: "John",time: "2pm" },function(json){
  alert("JSON Data: " + json.users[3].name);
});

这个函数是 ajax函数的简写，它等价于：

$.ajax({
  url: url,data: data,success: callback,dataType: json
});

重点：使用 jsonp 回调函数

<script type="text/javascript">     
    $.getJSON("http://localhost:8080/Jsonp/jsonp.jsp?callback=?",function(json){      
        alert(json[0].name);     
    });     
</script>

cors 跨域

需要请求的url 支持cors 跨域

之前的代码

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("?GET","/trigkit4",true);
    xhr.send();
</script>

cors 跨域代码

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("?GET","http://segmentfault.com/u/trigkit4/",true);
    xhr.send();
</script>

或者使用 ajax 进行 cors跨域

<script>
$(function () {
    $.ajax({
        type:'post',url:'http://localhost:8090/login',contentType:'text/plain',xhrFields:{
//            withCredentials:false
        },headers:{

        },success: function (data) {
//            alert(data);
            $('body').after(data);
        },error: function () {
            alert("error");
        }

    });
})
</script>

代码与之前的区别就在于相对路径换成了其他域的绝对路径，也就是你要跨域访问的接口地址。

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。这一步，需要配置服务端支持 cors：参考CORS支持

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!