跨域技術（JSONP與CROS）-js教程-PHP中文網

JSONP

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

function dll(response){ alert(response.city); } var script=document.createElement("script"); script.src="http://freegeoip.net/json/?callback=dll"; document.body.insertBefore(script,document.body.firstChild); 三步驟：建立script、指定src,插入到文件。

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://blog.csdn.net 很多服務都已經提供了CORS支持，例如AWS 支援跨域資源分享功能CORS，向S3上傳不需要代理。