AJAX的跨域問題解決方案

2022-12-29 14:01:08

跨域的概述

跨域是指從一個域名的網頁去請求另一個域名的資源。比如從百度（https://baidu.com）頁面去請求京東（https://www.jd.com）的資源。
通過超連結、form表單提交、window.location.href、document.location.href、script標籤、img標籤等方式進行跨域是不存在問題的。但在一個域名的網頁中的一段js程式碼傳送AJAX請求去存取另一個域名中的資源，由於同源策略的存在導致無法跨域存取，AJAX就存在這種跨域問題。
同源策略是指一段指令碼只能讀取來自同一來源的視窗和檔案的屬性，同源就是協定、域名和埠都相同。

下面是使用AJAX傳送請求跨域存取資源出現的問題：請求的資源上不存在“存取控制允許源”檔頭：（就是被同源策略阻止了）

區別同源與不同源

區分同源和不同源的三要素：

協定域名埠

協定一致，域名一致，埠號一致，三要素都要一致，才是同源，其它一律都是不同源。

同源策略有什麼用？

如果你剛剛在網銀輸入賬號密碼，檢視了自己還有一萬元塊錢，緊接著存取一些不規矩的網站，這個網站可以存取剛剛的網銀站點，並且獲取賬號密碼，那後果可想而知。所以，從安全的角度來講，同源策略是有利於保護網站資訊的。

AJAX跨域解決方案

有一些情況下，我們是需要使用AJAX進行跨域存取的。比如某公司的A頁面（a.aresourse.com）有可能需要獲取B頁面（b.bresourse.com）。

方案一、設定響應頭

核心原理：跨域存取的資源允許你跨域存取。（被呼叫方允許你可跨域存取）

實現：

response.setHeader("Access-Control-Allow-Origin","http://localhost:8080/ajax/ajax7.html");//允許某個
response.setHeader("Access-Control-Allow-Origin","*");//允許所有

方案二、jsonp

jsonp：json with padding

jsonp不是一個真正的AJAX請求。只不過可以完成AJAX的區域性重新整理效果。可以說jsonp是一種類AJAX請求的機制。

jsonp可以解決跨域問題。
注意：jsonp解決跨域的時候，只支援GET請求。不支援post請求。這是因為jsonp本就是動態的建立script標籤從而達到跨域的效果。

下面是動態建立的程式碼：

效果展示：

jQuery封裝了jsonp，也就是說可以使用jQuery庫去進行編寫jsonp程式碼，方便。

核心程式碼如下：

$.ajax({
	type:"GET",
	url:"跨域的url",
	dataType:"jsonp",   //指定資料型別
	jsonp:"fun",    //指定引數名（不設定的時候，預設是」callback「）
	jsonpCallback:"sayHello"   //指定回撥函數的名字，不設定的時候，jQuery會自動生成一個隨機的回撥函數,
	//並且這個回撥函數還會自動呼叫success的回撥函數
})