一、什么是 AJAX 跨域問題

同源策略規定，AJAX 請求（XMLHttpRequest）只能發給同源的網址，否則就會出錯。所謂的同源策略是指 3 個相同：協議相同、域名相同、端口相同。

比如 http://www.example.com/index.html 這個網址，協議是http ，域名是 www.example.com，端口是默認的 80。如果你在這個網站上使用 AJAX 發送 http://www.example1.com/index.html 請求，就會出錯，因為域名不同。

AJAX 跨域的根本原因是瀏覽器不允許這么做（不是服務端的問題），瀏覽器限制 AJAX 跨域請求的目的是為了保證用戶信息的安全，防止數據被惡意獲取。

二、JSONP 解決跨域問題

JSONP 如何解決跨域問題？

• AJAX 請求非同源資源會發生跨域問題，但是有的 HTML 標簽支持非同源請求，舉例來說：<img src=""> 與 <script src=""> 標簽
• 使用 JSONP 解決跨域問題，有一種方法，前端以 <script> 同樣的方式發送請求，把返回的 JSON 數據封裝，然后以 JS 腳本形式返回
• JSONP 允許客戶端傳遞一個 callback 參數請求跨域服務端，服務端返回數據時用 callback 參數名作為返回的函數名來包裹住返回的 JSON 數據

**我們以 MOOC 網為例，來說明一下 JSONP **

當我們訪問 https://www.imooc.com/ 時，會發送一個 https://www.imooc.com/index/getstarlist AJAX 請求，下面是訪問后返回的 JSON 數據

我們以 JONP 的形式（https://www.imooc.com/index/getstarlist?callback=test ）訪問

JSONP 的弊端？

• 需要在后端改動代碼，比如在 Spring 后臺代碼中需要配置一個 AbstractJsonpResponseBodyAdvice 切面，不過現在這個類已經過時了，也就是說現在不推薦使用 JSONP 來解決跨域問題
• JSONP 默認只支持 GET 方式的請求
• 發送的不是 XMLHttpRequest 請求（script），所以不支持異步事件等，不過這也是為什么 JSONP 可以解決跨域問題的原因

三、CORS 解決跨域問題

CORS 跨資源共享（Cross-origin resource sharing）是一種機制，它通過添加 HTTP 頭信息，解決 AJAX 跨域資源訪問問題。

CORS 請求可以分為兩類：簡單請求與非簡單請求，主要區別是非簡單請求在進行訪問之前，會發送一個預檢請求。“預檢”請求首先通過 OPTIONS 方法向另一域上的資源發送HTTP請求，以便確定實際請求是否安全發送。為了防止每次非簡單請求之前都發送預檢請求，可以在服務端設置預檢請求的緩存的時間。

簡單請求

• 請求方法為 HEAD、GET、POST 中的 1 種
• 請求的 header 中沒有自定義的請求頭
• Content-Type 為以下幾種：application/x-www-form-urlencoded、multipart/form-data、text/plain

非簡單請求

• header 中包含自定義請求頭 的 AJAX 請求
• PUT、DELETE 形式的 AJAX 請求
• Content-Type 字段的類型是 application/json 等

我自己在本地寫了一個測試跨域的 demo（Spring Boot），通過端口 8082 發出請求（攜帶自定義的請求頭）訪問端口為 8081 的服務。下面是 Chrome 控制臺有關 HTTP 的控制信息

通過上面的圖可以看出 CORS 解決跨域問題的關鍵所在，添加必要的請求頭與響應頭信息。下面是有關的頭信息介紹

HTTP 響應首部字段

• Access-Control-Allow-Origin：指定了允許訪問該資源的外域 URI。對于不需要攜帶身份憑證的請求，服務器可以指定該字段的值為通配符，表示允許來自所有域的請求。
• Access-Control-Allow-Methods：指明了實際請求所允許使用的 HTTP 方法
• Access-Control-Expose-Headers：在跨域訪問時，XMLHttpRequest 對象的getResponseHeader() 方法只能拿到一些最基本的響應頭，如果要攜帶自定義的請求頭，需要在該首部中進行允許的請求頭放入白名單
• Access-Control-Max-Age：非簡單請求預檢命令的最大緩存時間，在緩存時間內，對于非簡單請求，不會再發送預檢請求
• Access-Control-Allow-Credentials：是否允許攜帶身份憑證（Cookie）的請求

HTTP 請求首部字段

• Origin：表明預檢請求或實際請求的源 URL
• Access-Control-Request-Method：用于預檢請求。其作用是，將實際請求所使用的 HTTP 方法告訴服務器
• Access-Control-Request-Headers：用于預檢請求。其作用是，將實際請求所攜帶的首部字段告訴服務器。

四、other

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

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

五、參考文獻

跨域資源共享 CORS 詳解l 阮一峰
【原創】說說JSON和JSONP，也許你會豁然開朗，含jQuery用例 隨它去吧
Cross-Origin Resource Sharing (CORS)

總結

以上是生活随笔為你收集整理的AJAX 跨域详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。