快捷導(dǎo)航

JS跨域請求的問題解析

更新時間：2018年12月03日 08:45:52 投稿：laozhang

在本篇內(nèi)容里小編給大家整理了關(guān)于解決JS跨域請求的問題知識點，需要的朋友們參考學(xué)習(xí)下。

同源策略

在運行中我們有時會出錯是因為我們違反了同源策略，這是一種瀏覽器所實施的安全措施，用于限制具有不同來源的文檔之間的交互。頁面的來源由其協(xié)議，主機(jī)和端口號定義。具有相同來源的資源可以相互完全訪問。但是如果具有不相同的源將會拒絕訪問。

http://www.a.com/a.js 
http://www.b.com/a.js 
這兩個之間就不可以互相訪問，因為域名的不相同

域名組成

如果上面兩個域名想互相訪問就需要跨域請求，一般情況下同源政策規(guī)定：允許跨源寫入，而不允許跨源讀取這意味著同源政策不會阻止將數(shù)據(jù)寫入，只會禁止他們從域中讀取數(shù)據(jù)，或者對從其域收到的響應(yīng)做任何事情。

跨域請求的方法

JSONP

JSONP 稱為帶有填充的JavaScript對象表示，是一種通過利用HTML頁面中的腳本標(biāo)記可以來加載來自不同來源的代碼來執(zhí)實現(xiàn)跨域請求的方法。JSONP依賴于<script>標(biāo)簽可以來自不同來源的事實。當(dāng)瀏覽器解析<script>標(biāo)記時，它將獲取腳本內(nèi)容，并在當(dāng)前頁面的上下文中執(zhí)行它。通常，服務(wù)將返回HTML或以XML或JSON等數(shù)據(jù)格式表示的某些數(shù)據(jù)。但是，當(dāng)向啟用JSONP的服務(wù)器發(fā)出請求時，它會返回一個腳本塊，該腳本塊在執(zhí)行時會調(diào)用頁面指定的回調(diào)函數(shù)，并將實際數(shù)據(jù)作為參數(shù)提供

注意：它沒有相同的源點限制，即使在舊瀏覽器中也具有良好的兼容性但是JSONP只能用于執(zhí)行跨域GET請求，服務(wù)器必須顯式支持JSONP請求。

CORS方法

為服務(wù)器提供了一種機(jī)制，告訴瀏覽器可以請求域A讀取來自域B的數(shù)據(jù)。通過在響應(yīng)中包含一個新的 Access-Control-Allow-OriginHTTP頭來完成的，當(dāng)瀏覽器收到來自跨源源的響應(yīng)時，它將檢查CORS頭。如果響應(yīng)頭中指定的源點與當(dāng)前源點相匹配，則允許對響應(yīng)進(jìn)行讀訪問，否則就會報錯。

與jsonp相比，CORS具有以下優(yōu)勢：

它不僅支持GET請求，還支持POST等其他請求

它可以使用XMLHttpRequest發(fā)送和接收數(shù)據(jù)，并具有更好的錯誤處理機(jī)制