CORS 錯誤詳解

一、什麼是CORS？

CORS（Cross-Origin Resource Sharing）是一種機制，它使用額外的HTTP頭來告訴瀏覽器，讓運行在一個origin (domain) 的Web應用被准許訪問來自不同源服務器上的指定的資源。當一個資源在請求時，它使用一個GET、POST或是HEAD方法，然後這個資源響應一個HTTP頭，表示允許特定的源來訪問該資源，從而實現在不同域之間（協議、域名、端口號）進行安全地數據傳輸。

二、CORS的場景

CORS適用於XMLHttpRequest或Fetch API發出的請求，用於跨域訪問其它域名下的數據，典型的場景有:

• Web前端應用程序發出跨域AJAX請求，比如一個設置在a.com域名下的Web應用請求b.com域名下的資源。
• CORS也適用於Web前端框架客戶端應用程序與API客戶端服務之間的跨域調用。

三、CORS的請求頭和響應頭

1、請求頭：

Origin: http://a.com

2、響應頭：

Access-Control-Allow-Origin: http://a.com
Access-Control-Allow-Headers: *, Authorization
Access-Control-Allow-Methods: *
Access-Control-Allow-Credentials: true

四、CORS的錯誤碼

1、簡單請求時，出現以下情況會產生CORS錯誤碼：

• 請求方式不是GET、HEAD、POST，如PUT、DELETE等。
• 請求頭信息不是以下幾種，參考HTTP規範中的「列出的首部字段」：

    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type（僅限於部分值）
    

• 請求使用了HTTP身份驗證信息。
• 請求包含cookie信息。
• 請求的Content-Type不正確。

2、複雜請求時，出現以下情況會產生CORS錯誤碼：

• 請求方法並不是GET/POST/HEAD。
• 發送了POST請求，但不是以下類型之一：

    application/x-www-form-urlencoded
    multipart/form-data
    text/plain
    

• 設置了自定義請求頭，服務器沒有在響應中添加對應頭信息。
• 請求中包含的Origin值和服務器所在的域不匹配。
• 服務器沒有響應Access-Control-Allow-Origin頭。
• 服務器響應中沒有Access-Control-Allow-Methods頭、Access-Control-Allow-Headers頭或Access-Control-Max-Age頭。
• 可能是因為跨域設置了Credentials屬性，但後台沒有響應Access-Control-Allow-Credentials: true

五、CORS錯誤的解決方法

CORS錯誤解決分兩種情況：一種是服務端提供跨域支持，一種是在前端搭配後端提供跨域支持，該解決方法大體分為以下幾種：

1、服務端提供跨域支持。

在服務器端添加 Access-Control-Allow-Origin頭部，可允許特定的源訪問該資源，並可在頭部添加允許的 HTTP 方法和響應頭域。

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header("Access-Control-Allow-Origin: http://a.com");
    header("Access-Control-Allow-Headers: *, Authorization");
    header("Access-Control-Allow-Methods: *");
    header('Access-Control-Allow-Credentials: true');
    exit;
}
header("Access-Control-Allow-Origin: http://a.com");
header('Access-Control-Allow-Credentials: true');

2、前端搭配後端提供跨域支持。

在前端發起請求時，設置請求頭：

const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'http://b.com/api', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('Cookie', document.cookie)
xhr.setRequestHeader('Authorization', auth);
xhr.send();

在後端返回請求響應時，設置響應頭：

header('Access-Control-Allow-Origin: http://a.com');
header('Access-Control-Allow-Headers: *, Authorization');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Credentials: true');
echo $responseBody;

六、CORS錯誤碼實際案例

1、ERR_TOO_MANY_REDIRECTS：重定向次數過多，通常是請求被攔截。

2、ERR_FAILED：通常是請求超時，或者是服務器內部錯誤。

3、ERR_TUNNEL_CONNECTION_FAILED：WebSocket服務請求失敗。

4、ERR_ABORTED：用戶主動中斷請求。

5、ERR_CONNECTION_REFUSED：請求被服務器拒絕，通常是跨域問題導致。