HTML5中 XMLHttpRequest Level 2 的推出。可以通過在返回的HTTP請求頭中加入 Access-Control-Allow-Origin 的設置,讓瀏覽器支持對不同域的AJAX請求。這個情況下前端AJAX的代碼不用做任何更改,只需要在服務端的返回中設置以下頭信息即可:
Access-Control-Allow-Origin: * //*代表任何域。
也可以指定地址 Access-Control-Allow-Methods: POST,GET//支持的方法
對於XHR2,IE瀏覽器的支持是IE10以上 。但是IE早在IE8時就推出了 XDomainRequest 對象進行跨域操作,一直沿用到IE10才被取代掉。因此在IE8,IE9中應該使用 XDomainRequest (XDR)來實現。 XDR在創建時是通過 new XDomainRequest() 進行創建。其他操作和XHR有細微差別。比如open方法只有method和url兩個參數,XDR只支持異步不支持同步操作。
詳細信息可以查看:https://msdn.microsoft.com/en-us/library/cc288060(v=VS.85).aspx
當然,強大的jQuery插件庫已經為我們封裝好了這種跨域方式的插件jquery.xdomainrequest.min.js,
地址為:http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js 將此插件引入到HTML頁面中,還是不夠的,這樣只能發出去options之后的請求(也就是真正的請求),並沒有進行是否需要cors的options請求。這樣的做法,雖然服務端能返回數據,但數據是假的,或者說根本就沒收到request數據,拿登錄來說,用戶名和密碼都填寫正確,提交的時候,返回的卻是“賬戶和密碼不能為空”,這樣看來,服務端根本就沒收到request.所以針對IE9(8)還要在每次發送ajax之前進行一次判斷,是否支持cors:jQuery.support.cors = true;這樣每次發ajax之前都要先進行一次判斷,如果是高級瀏覽器,就不需要cors的兼容問題,否則要借助xdomainrequest的幫助完成請求!
實際操作:
1、頁面引入js文件:
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js" type="text/javascript" charset="utf-8"></script>
2、js
jQuery.support.cors = true; $.ajax({ url:"http://api."+ localhostname +"/portal/reports/"+arr, type:"get", ContentType: 'text/plain', headers: { 'Authorization': id + "-" + token }, ... });
好了,就這些,明天回家過年,祝大家新年快樂!