解決「Access-Control-Allow-Headers 不允許請求標頭欄位Access-Control-Allow-Headers」錯誤

In為了糾正最初的錯誤，將標頭添加到請求中以允許各種方法和標頭。但是，這導致了一個新錯誤：「Access-Control-Allow-Headers 不允許請求標頭欄位Access-Control-Allow-Origin。」

了解CORS 和預檢請求

此問題源自於瀏覽器針對某些內容類型的跨來源請求發送預檢OPTIONS 請求。預設情況下，Angular 發送具有 application/json 內容類型的數據，這會觸發此預檢請求。

伺服器回應與標頭

伺服器必須明確允許存取-其回應中的 Control-Allow-Headers 標頭可防止錯誤。否則，瀏覽器會將回應解釋為不允許任何標頭。

解決方案：修改內容類型或伺服器回應

若要解決此問題，請修改用戶端或伺服器設定：

1 .客戶端（Angular）：

將預設的Angular 內容類型覆寫為application/x-www-form-urlencoded，這不會觸發預檢請求：

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

2.伺服器端：

或者，允許伺服器上的 Access-Control-Allow-Headers 標頭。必須設定以下回應標頭：

• Access-Control-Allow-Origin: * 或特定來源（例如，https://example.com）
• Access-Control -Allow -Methods：GET、POST、PUT、DELETE、OPTIONS
• Access-Control-Allow-Headers：客戶端在請求中發送的所有標頭（例如，Content-Type、Authorization）