如何使用CORS解決跨域問題

什么是跨域

什么是跨域請求？

當一個資源向與本身所在服務器不同的域或者端口發起請求時，會發起一個跨域HTTP請求。

為什么有跨域限制？

跨域資源共享（CORS即Cross Origin Resource Sharing）機制允許Web服務器進行跨域訪問控制，從而可以安全地進行跨域訪問，覽器支持在 API 容器中使用 CORS，以降低跨域 HTTP 請求所帶來的風險。

---

CORS分成簡單請求和復雜請求

簡單請求大致滿足以下條件：

使用下列方法之一：

1. GET

2. HEAD

3. POST

HTTP頭不超過以下字段：

1. Accept

2. Accept-Language

3. Content-Language

4. DPR

5. Downlink

6. Save-Data

7. Viewport-Width

8. Width

其中Content-Type 只能為以下之一：

1. text/plain

2. multipart/form-data

3. application/x-www-form-urlencoded

如不滿足以上條件，都可以視為復雜請求。

進行簡單請求時，需要在服務端帶上Access-Control-Allow-Origin的響應頭，以PHP為例：

header('Access-Control-Allow-Origin:*']);

其中“ * ”表示該數據對任何人可見，如果只希望特定的地址訪問，可以把*改為對應的地址

復雜請求會先發送一個預請求，該請求以OPTIONS方法發起，預請求會對服務器進行檢測，以獲取服務器是否允許該請求，預請求可以避免跨域請求對服務器產生的未知影響。

當進行復雜請求時需要對服務端進行設置，以PHP為例：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-  Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

其中Access-Control-Allow-Method表示預請求后所允許的請求方式，Access-Control-Allow-Headers表示預請求后所允許的響應頭，如果預請求成功，就可以進行實際請求。

---

附帶身份憑證的跨域請求

一般基於HTTP cookies的驗證身份對於跨域 XMLHttpRequest請求來說，瀏覽器並不會發送對應的身份憑證信息，如果需要帶上身份憑證的XMLHttpRequest請求，需要做額外的設置，以PHP為例：

header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
header('Access-Control-Allow-Methods:GET,POST, PUT,DELETE,OPTIONS,PATCH');

 

前端則需要將withCredentials設置為true，從而向服務器發送cookies，服務端則需要設置Access-Control-Allow-Credentials:true來把響應內容返回請求者，由於withCredentials：true與Access-Control-Allow-Origin:*不能同時存在，所以需要從$_SERVER（PHP超級全局變量，包含由web服務器創建的信息，它提供了服務器和客戶配置及當前請求環境的有關信息。）獲取請求域的信息。