如何修復跨來源請求中的「Access-Control-Allow-Headers 不允許請求標頭欄位 Access-Control-Allow-Headers」錯誤？

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

中為了糾正最初的錯誤，將標頭添加到請求中以允許各種方法和標頭。但是，這導致了一個新錯誤：「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）

以上是如何修復跨來源請求中的「Access-Control-Allow-Headers 不允許請求標頭欄位 Access-Control-Allow-Headers」錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！