AJAX 跨域詳解

2021-08-21 17:50:00 字數 1719 閱讀 9899

一、什麼是 ajax 跨域問題

同源策略規定,ajax 請求(xmlhttprequest比如這個**,協議是http,網域名稱是www.example.com,埠是預設的80。如果你在這個**上使用 ajax 傳送請求,就會出錯,因為網域名稱不同。

ajax 跨域的根本原因是瀏覽器不允許這麼做(不是服務端的問題),瀏覽器限制 ajax 跨域請求的目的是為了保證使用者資訊的安全,防止資料被惡意獲取。

二、jsonp 解決跨域問題

jsonp 如何解決跨域問題?

**我們以 mooc 網為例,來說明一下 jsonp **

當我們訪問時,會傳送乙個index/getstarlistajax 請求,下面是訪問後返回的 json 資料

我們以 jonp 的形式(index/getstarlist?callback=test)訪問

jsonp 的弊端?

三、cors 解決跨域問題

cors 跨資源共享(cross-origin resource sharing)是一種機制,它通過新增 http 頭資訊,解決 ajax 跨域資源訪問問題。

cors 請求可以分為兩類:簡單請求與非簡單請求,主要區別是非簡單請求在進行訪問之前,會傳送乙個預檢請求。「預檢」請求首先通過 options 方法向另一域上的資源傳送http請求,以便確定實際請求是否安全傳送。為了防止每次非簡單請求之前都傳送預檢請求,可以在服務端設定預檢請求的快取的時間。

簡單請求

非簡單請求

我自己在本地寫了乙個測試跨域的 demo(spring boot),通過埠 8082 發出請求(攜帶自定義的請求頭)訪問埠為 8081 的服務。下面是 chrome 控制台有關 http 的控制資訊

通過上面的圖可以看出 cors 解決跨域問題的關鍵所在,新增必要的請求頭與響應頭資訊。下面是有關的頭資訊介紹

http 響應首部字段

http 請求首部字段

四、other

能解決跨域的方式還有很多,比如禁止瀏覽器的跨域、nginx 解決跨域等。這裡只講解了兩種常見的跨域方式,因為 jsonp 存在一些弊端,因此推薦使用 cors 等方式來解決跨域問題。

跨域問題,涉及到很多有關http 協議 的知識,希望大家重視計算機基礎知識。上面那個測試的 demo 上傳到了 github,demo 是用 spring boot 實現的,有需要的可以點我前往~

五、參考文獻

跨域資源共享 cors 詳解l 阮一峰

【原創】說說json和jsonp,也許你會豁然開朗,含jquery用例 隨它去吧

cross-origin resource sharing (cors)

跨域問題詳解 ajax跨域解決

跨域問題的產出,根本原因在於瀏覽器的同源策略,什麼又是同源策略呢,官方解釋 同源策略限制了從同乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。這是乙個用於隔離潛在惡意檔案的重要安全機制。同源的定義 如果兩個頁面的協議,埠 如果有指定 和網域名稱都相同,則兩個頁面具有相同的源。可以跨域讀取其...

ajax跨域 ajax跨域學習總結(一)

網域名稱又稱網域 網域名稱,是由一串用點分隔的名字組成的internet上某一台計算機或計算機組的名稱,用於在資料傳輸時標識計算機的電子方位 有時也指地理位置 internet的核心服務dns domain name system,網域名稱系統,有時也簡稱為網域名稱 提供網域名稱到ip位址的相對映。...

ajax跨域與cookie跨域

ajax跨域取資料 利用可以跨域載入js的原理 functioncallback 這是需要返回這樣乙個js函式 ajax資料型別使用jsonp 如 ajax url callbask x datatype jsonp type get 在使用資料型別為jsonp時,jquery自動會在url路徑上拼...