DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 跨域請求的完美解決方法(JSONP, CORS)
跨域請求的完美解決方法(JSONP, CORS)
編輯:JavaScript基礎知識     

一個眾所周知的問題,Ajax直接請求普通文件存在跨域無權限訪問的問題。解決方法有JSONP,Flash等等。

JSONP

我們發現,Web頁面上調用js文件時不受是否跨域的影響,凡是擁有"src"這個屬性的標簽都擁有跨域的能力,比如<script>、<img>、<iframe>。那就是說如果要跨域訪問數據,就服務端只能把數據放在js格式的文件裡。恰巧我們知道JSON可以簡潔的描述復雜數據,而且JSON還被js原生支持,所以在客戶端幾乎可以隨心所欲的處理這種格式的數據。然後客戶端就可以通過與調用腳本一模一樣的方式,來調用跨域服務器上動態生成的js格式文件。客戶端在對JSON文件調用成功之後,也就獲得了自己所需的數據。這就形成了JSONP的基本概念。允許用戶傳遞一個callback參數給服務端,然後服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據,這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

jQuery支持JSONP的調用。在另外的一個域名中指定好回調函數名稱,就可以用下面的形式來就加載JSON數據。

url?callback=?
jQuery.getJSON(url + "&callback=?", function(data) { 
 alert(data.a + data.b); 
});

服務端當然也要提供JSONP的支持,其實只要提供讀寫callback這個params就可以了。

跨域資源共享(CORS)

Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定義了在跨域訪問資源時浏覽器和服務器之間如何通信。CORS背後的基本思想是使用自定義的HTTP頭部允許浏覽器和服務器相互了解對方,從而決定請求或響應成功與否。

CORS與JSONP相比,更為先進、方便和可靠。

1、 JSONP只能實現GET請求,而CORS支持所有類型的HTTP請求。

2、 使用CORS,開發者可以使用普通的XMLHttpRequest發起請求和獲得數據,比起JSONP有更好的錯誤處理。

3、 JSONP主要被老的浏覽器支持,它們往往不支持CORS,而絕大多數現代浏覽器都已經支持了CORS。

對一個簡單的請求,沒有自定義頭部,要麼使用GET,要麼使用POST,它的主體是text/plain,請求用一個名叫Orgin的額外的頭部發送。Origin頭部包含請求頁面的頭部(協議,域名,端口),這樣服務器可以很容易的決定它是否應該提供響應。

服務器端對於CORS的支持,主要就是通過設置Access-Control-Allow-Origin來進行的。

Header set Access-Control-Allow-Origin * 

為了防止XSS攻擊我們的服務器, 我們可以限制域,比如

Access-Control-Allow-Origin: http://www.jb51.net

很多服務都已經提供了CORS支持,比如 AWS 支持跨域資源分享功能CORS,向S3上傳不需要代理。

以上這篇跨域請求的完美解決方法(JSONP, CORS)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved