首頁 web前端 js教程 跨域技術(JSONP與CROS)

跨域技術(JSONP與CROS)

Dec 14, 2016 pm 01:02 PM

JSONP

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

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上傳不需要代理。


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

HTTP與節點和HTTP-Console調試 HTTP與節點和HTTP-Console調試 Mar 01, 2025 am 01:37 AM

HTTP與節點和HTTP-Console調試

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

See all articles