如何使用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服務器建立的信息，它提供了服務器和客戶配置及當前請求環境的有關信息。）獲取請求域的信息。