AJAX跨域请求和CORS跨域资源共享

同源策略限制：

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果没有同源策略，攻击者可以通过JavaScript获取你的邮件以及其他敏感信息，比如说阅读私密邮件，发送虚假邮件，查看聊天记录等等。所谓同源是指，协议，域名，端口相同。三者只有有一个不相同，就认为不同源！

例如：域：http://store.company.com/dir/index.html

协议不同：https://store.company.com/dir/index.html
端口不同：http://store.company.com:81/dir/index.html
主机名不同：http://news.company.com/dir/index.html

跨域请求：

1. 对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。

ajax不允许跨子域请求，但是iframe可以！可以通过提升域的方法来实现。

例如www.a.com/a.html和a.com/b.html为例，只需在a.html中添加一个b.html的iframe，并且设置两个页面的document.domain都为’a.com’（只能为主域名），两个页面之间即可互相访问了。

如果b.html要访问a.html，可在子窗口（iframe）中通过window.parent来访问父窗口的window对象。

例如www.a.com/a.html中的script：

document.domain='a.com';//提升域
varifr = document.createElement('iframe');
ifr.src = 'http://a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
  //获取iframe的document对象
  //W3C的标准方法是iframe.contentDocument，
  //IE6、7可以使用document.frames[ID].document
  //为了更好兼容，可先获取iframe的window对象iframe.contentWindow
  vardoc = ifr.contentDocument || ifr.contentWindow.document;
  // 在这里操纵b.html
  alert(doc.getElementById("test").innerHTML);

而a.com/b.html:

<!DOCTYPE >
<html>
<head>
<title></title>
<scripttype="text/javascript">
  document.domain='a.com';//提升域
</script>
</head>
<body>
<h1id="test">Hello World</h1>
</body>
</html>

但是，这种方法只支持同一根域名下的页面！baidu.com和google.com的话，想想就好(●’◡’●)

复习：本来在同一个 origin 下，父页面可以通过 iframe.contentWindow 直接访问 iframe 的全局变量、DOM 树等，iframe 可以也通过 parent/top 对父页面做同样的事情。

不同 origin 下，还有一种标准的方法是通过HTML5的 .postMessage() 互相通信，不标准的方法是利用 location.hash 等奇技淫巧。

JSONP：

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

原理：含有src属性的标签都可以跨域，如img、script、iframe！

本质：只是执行了javascript脚本！

简单来说，就是在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数（返回带数据参数的回调函数的字符串，在客户端刚好被动态执行了！）。

看实例：

<script type="text/javascript"> function jsonpCallback(result) { alert(result); } var JSONP=document.createElement("script"); JSONP.type="text/javascript"; JSONP.src="你的请求地址?callback=jsonpCallback";//在请求的地址后面带上回调函数，客户端声明的jsonpCallback  document.getElementsByTagName("head")[0].appendChild(JSONP); </script>

或者：

<script type="text/javascript"> //注意：这个回调函数需要声明在前，js链接调用在后！ function jsonpCallback(result) { alert(result); } </script>  
<script type="text/javascript" src="你的请求地址?callback=jsonpCallback"></script>

后台返回的大概结果：

jsonpCallback({a:1,b:2});//类似的字符串，在js脚本中可以被动态执行，此来就可以拿到数据啦

但是，相应的弊端也出现了！这种方法每当页面加载就执行，而不是按事件触发去动态执行的！因而出现了jsonp的封装，在需要的时候动态调用！

jsonp封装：

大概形式：jsonp(url,data,callback)

大概步骤思路：

动态添加script标签，并将其加入页面中
组装传入的数据参数data
给每个回调函数唯一命名，设置回调请求成功或失败之后的处理
最后无论请求成功还是失败，都要删除创建的javascript标签。

示例：（转自博文自己封装的JSONP跨域函数：http://blog.csdn.net/liusaint1992/article/details/50959571）

function JSONP(url,config){  
    var data = config.data || [];  
    var paraArr=[],paraString='';//get请求的参数。 
    var urlArr;  
    var callbackName;//每个回调函数一个名字。按时间戳。 
    var script,head;//要生成script标签。head标签。 
    var supportLoad;//是否支持 onload。是针对IE的兼容处理。 
    var onEvent;//onload或onreadystatechange事件。 
    var timeout = config.timeout || 0;//超时功能。 

    for(var i in data){  
        if(data.hasOwnProperty(i)){  
            paraArr.push(encodeURIComponent(i) + "=" +encodeURIComponent(data[i]));  
        }  
    }  

    urlArr = url.split("?");//链接中原有的参数。 
    if(urlArr.length>1){  
        paraArr.push(urlArr[1]);  
    }  

    callbackName = 'callback'+new Date().getTime();  
    paraArr.push('callback='+callbackName);  
    paraString = paraArr.join("&");  
    url = urlArr[0] + "?"+ paraString;  

    script = document.createElement("script");  
    script.loaded = false;//为了实现IE下的onerror做的处理。JSONP的回调函数总是在script的onload事件（IE为onreadystatechange）之前就被调用了。因此我们在正向回调执行之时，为script标签添加一个属性，然后待到onload发生时，再检测有没有这个属性就可以判定是否请求成功，没有成功当然就调用我们的error。 

    //将回调函数添加到全局。 
    window[callbackName] = function(arg){  
        var callback = config.callback;  
        callback(arg);  
        script.loaded = true;  
    }  

    head = document.getElementsByTagName("head")[0];  
    head.insertBefore(script,head.firstChild) //chrome下第二个参数不能为null 
    script.src = url;  

    supportLoad = "onload" in script;  
    onEvent = supportLoad ? "onload" : "onreadystatechange";  

    script[onEvent] = function(){  

        if(script.readyState && script.readyState !="loaded"){  
            return;  
        }  
        if(script.readyState == 'loaded' && script.loaded == false){  
            script.onerror();  
            return;  
        }  
        //删除节点。 
        (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));    
        script = script[onEvent] = script.onerror = window[callbackName] = null;  

    }  

    script.onerror = function(){  
        if(window[callbackName] == null){  
            console.log("请求超时，请重试！");  
        }  
        config.error && config.error();//如果有专门的error方法的话，就调用。 
        (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));    
        script = script[onEvent] = script.onerror = window[callbackName] = null;  
    }  

    if(timeout!= 0){  
        setTimeout(function() {  
            if(script && script.loaded == false){  
                window[callbackName] = null;//超时，且未加载结束，注销函数 
                script.onerror();                 
            }  
        },timeout);  
    }  

}

jQuery中对JSONP的实现：

jQuery中提供了两个方法来实现：$.getJSON()和$.ajax(),常用的是底层的$.ajax()方法！

1.$.getJSON()：

$.getJSON(url?jsoncallback=?,fn(data){…})

关键点：在url后带上参数jsoncallback=?，后台返回随机命名的callback函数！会被Jquery自动替换成回调方法的名称!

<script type="text/javascript"> $.getJSON("http://localhost:3856/GetItemCates.ashx/GetItemCats?gateid=20&format=json&jsoncallback=?",function (data) { var myprops = data.itemcats_get_response.item_cats.item_cat; $.each(myprops,function (index,item) { $("ul").append("<li>" + item.name + "," + item.cid + "</li>") }); } ); </script>

2. $.ajax():

$.ajax({
url: url,
data: data,
dataType : “jsonp”,
jsonp: “jsoncallback”,
jsonpCallback:”success_jsonpCallback”,
success: callback
});

$.ajax({
     type : "get",//jquey是不支持post方式跨域的
     async:false,url :"http://api.taobao.com/apitools/ajax_props.do",//跨域请求的URL
     dataType : "jsonp",//传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
     jsonp: "jsoncallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
     jsonpCallback:"success_jsonpCallback",//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
     success : function(json){ 
             alert(json);
     }
});

以上的jsonp和jsonpCallback可以自定义回调函数名和参数名！

注意：

需要服务器端的支持才行。
只支持get请求

CORS跨域资源共享（真正跨域）

跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。 CORS就是为了让AJAX可以实现可控的跨域访问而生的

CORS与JSONP相比:

JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
JSONP主要被老的浏览器支持，但它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

本质是HTML5 xhr level2原生ajax请求！

只需要在后台中加上响应头来允许域请求！在被请求的Response header中加入以下设置，就可以实现跨域访问了！

//指定允许其他域名访问
'Access-Control-Allow-Origin:*'//或指定域
//响应类型
'Access-Control-Allow-Methods:GET,POST'
//响应头设置
'Access-Control-Allow-Headers:x-requested-with,content-type'

后台的娃助我(●’◡’●)

总结：整理了同源策略限制，出现了跨域请求的需求，原生传统的跨域请求方式，原生js和jQuery中对跨域的处理（JSONP）,以及HTML5 中的CORS跨域资源共享。系统条理得梳理好传说中的跨域了！o(^▽^)o

原文链接：https://www.f2er.com/ajax/162025.html