AJAX 跨域詳解

一、什麼是 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)