天天看點

總結解決跨域的三種方法

方法1.通過PHP設定響應頭允許跨域(CORS方式)

CORS(跨域資源共享,Cross-Origin Resource Sharing)定義一種跨域通路的機制,可以讓AJAX實作跨域通路。CORS 允許一個域上的網絡應用向另一個域送出跨域 AJAX 請求。實作此功能非常簡單,隻需由伺服器發送一個響應頭即可

header(“Access-Control-Allow-Origin:*”); // 允許任何來源

header(“Access-Control-Allow-Origin:http://local.com”); //隻允許來自域名http://local.com的請求

代碼如下:

local.com域名檔案:

總結解決跨域的三種方法

請求其他域名native.com:

總結解決跨域的三種方法

請求的結果:成功

總結解決跨域的三種方法

方法2.使用php做代理去請求第三方api接口

php是可以跨域的,我們利用ajax請求本域名中的php檔案,php再去請求第三方接口檔案,進而達到跨域目的。

總結解決跨域的三種方法

php做代理請求:

總結解決跨域的三種方法

ajax請求本域名php代理檔案:

總結解決跨域的三種方法

請求結果:成功

總結解決跨域的三種方法

将資料取出:

總結解決跨域的三種方法

結果:

總結解決跨域的三種方法

方法3.jsonp方法 隻能get

浏覽器隻對XHR(XMLHttpRequest)請求有同源請求限制,而對script标簽src屬性、link标簽ref屬性和img标簽src屬性沒有這這種限制,利用這個“漏洞”就可以很好的解決跨域請求。JSONP就是利用了script标簽無同源限制的特點來實作的,當向第三方站點請求時,我們可以将此請求放在<script>标簽的src屬性裡這就如同我們請求一個普通的JS腳本:

<script src="http://www.abc.com/index.php/?param1=1&callback=fnName">

</script>

JSONP實作跨域請求的原理簡單的說,

就是動态建立<script>标簽,然後利用<script>的src 不受同源政策限制來跨域擷取資料。

JSONP 由兩部分組成:

回調函數和資料。

回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。而資料就是傳入回調函數中的 JSON 資料。

本站并提供一個回調函數來接收資料(函數名可約定,或通過位址參數傳遞)。

第三方網站産生的響應為json資料的包裝(故稱之為jsonp,即json padding),形如:

callback({“name”:“fegnjie”,“age”:“18”}),這樣本站浏覽器會調用callback函數,并傳遞解析後json對象作為參數。

第1步:動态建立<script>标簽,設定其src,回調函數在src中設定:

總結解決跨域的三種方法

第2步:在頁面中,傳回的JSON作為參數傳入回調函數中,我們通過回調函數來來操作資料。

總結解決跨域的三種方法

了解了JSONP的基本使用方法,我們在實作上面通過ajax調用豆瓣接口的需求,實作代碼如下:

總結解決跨域的三種方法

在控制台,我們可以檢視到傳回的response資料格式為JSON對象格式的,具體需要取出哪些參數,可以根據自己的需要:

總結解決跨域的三種方法

繼續閱讀