Ajax跨域問題

一、什么是跨域

  http:// www . google : 8080 / script/jquery.js

      http:// (協議號)

               www  (子域名)

             google (主域名)

               8080 (端口號)

script/jquery.js (請求的地址)
  • 當協議、子域名、主域名、端口號中任意一各不相同時,都算不同的“域”。

  • 不同的域之間相互請求資源,就叫“跨域”。

二、為什么會出現跨域問題

  • 由于在工作中需要使用AJAX請求其他域名下的請求,但是會出現拒絕訪問的情況,這是因為基于安全的考慮,AJAX只能訪問本地的資源,而不能跨域訪問。

  • 比如說你的網站域名是aaa.com,想要通過AJAX請求bbb.com域名中的內容,瀏覽器就會認為是不安全的,所以拒絕訪問。

三、處理跨域的方法

1.代理

這種方式是通過后臺(ASP、PHP、JAVA、ASP.NET)獲取其他域名下的內容,然后再把獲得內容返回到前端,這樣因為在同一個域名下,所以就不會出現跨域的問題。
比如在北京(www.beijing.com/sever.php)和上海(www.shanghai.com/sever.php)各有一個服務器,北京的后端(www.beijing.com/sever.php)直接訪問上海的服務,然后把獲取的響應值返回給前端。也就是北京的服務在后臺做了一個代理,前端只需要訪問北京的服務器也就相當與訪問了上海的服務器。這種代理屬于后臺的技術。


2.JSONP

假設在http://www.aaa.com/index.php這個頁面中向http://www.bbb.com/getinfo.php提交GET請求,那么我們在www.aaa.com頁面中添加如下代碼:

var eleScript= document.createElement("script");//創建一個script元素
 eleScript.type ="text/javascript";//聲明類型、
 eleScript.src ="[http://www.bbb.com/getinfo.php(http://www.bbb.com/getinfo.php)";
//添加src屬性 引入跨域訪問的url
 
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
//在頁面中添加新創建的script元素

當GET請求從http://www.bbb.com/getinfo.php返回時,可以返回一段JavaScript代碼,這段代碼會自動執行,可以用來負責調用http://www.aaa.com/index.php頁面中的一個callback函數。看下面一個列子:
www.aaa.com頁面中:

<script>  
function
 jsonp( json ){
                document.write( json.name );
                //輸出周星馳
} 
<script> 
<script src="[http://www.bbb.com/getinfo.php](http://www.bbb.com/getinfo.php)"></script>

www.bbb.com頁面中:
  jsonp({ "name":"周星馳","age":45 });
也就是在www.aaa.com頁面中聲明,在www.bbb.com頁面中調用。但是JSONP只支持 “GET” 請求,但不支持 “POST” 請求。

3. XHR2

“XHR2” 全稱 “XMLHttpRequest Level2” 是HTML5提供的方法,對跨域訪問提供了很好的支持,并且還有一些新的功能。

  • IE10一下的版本都不支持

  • 只需要在服務器端頭部加上下面兩句代碼:

  header( "Access-Control-Allow-Origin:*" );
  header( "Access-Control-Allow-Methods:POST,GET" );
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容