ajax跨域 & 同源策略

同源策略

• 同源：URL三元组(协议，域名，端口)完全一致
• 同源策略（禁止js/ajax跨域）：浏览器禁止源A页面上的javascript，读写其他源的数据。比如：
  
  1. 源A页面的ajax请求http://openapi.tencentyun.com/v3/user/get_info
  2. chrome console提示：Failed to load http://openapi.tencentyun.com/v3/user/get_info: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.
  3. chrome network有返回：{“ret”:-1,”msg”:”client request’s parameters are invalid”}
• 同源策略是浏览器的安全策略。比如：
  
  1. 通过URL拼接，在打开银行网站时，生成一个网站A的iframe，如果没有同源策略。这段iframe会拦截并发送账号密码到网站A，导致密码泄露。

ajax跨域–JSONP解决方案

• 浏览器禁止javascript跨域，但允许 script, img, iframe, link 跨域访问
• 方案：后端改造 + jsonp + script.src模拟ajax(XHR: xmlHttpRequest)
  
  1. 后端改造：返回值”{name:\”ok\”}” 改造成 “;onCallback({name:\”ok\”});”
  2. jsonp + script.src模拟例子

<script type="text/javascript">
    function handleResponse(response){
            alert(JSON.stringify(response));
    }
</script>
<script type="text/javascript">
    function getUser() {     
        var script = document.createElement("script");
        script.src = "https://xxx.com/getUser?uid=1&callback=onCallback";
        document.body.insertBefore(script, document.body.firstChild);   
    };
};
</script>

• jquery的ajax跨域也是模拟出来的，并没有发送XHR请求，而是js请求

$.ajax({
    async : true,
    url : "https://xxx.com/getUser?uid=1",
    type : "GET",
    dataType : "jsonp", 
    jsonp : 'callback', //不写，会随机生成一个
    jsonpCallback: 'onCallback',//不写，会随机生成一个
    data : {uid : 1},
    success: function(response, status, xhr){
        alert(JSON.stringify(response));
    }
});