為什麼在 Angular 中使用 POST 請求發送檔案時，「Access-Control-Allow-Headers」中不允許我的「Access-Control-Allow-Origin」標頭？

問題：帶標頭的跨源請求錯誤

嘗試使用POST 請求發送文件時，開發人員可能會遇到錯誤，表示Access-Control-Allow-Headers 回應標頭不允許特定的請求標頭。

為了解決此問題，開發人員在請求中添加了以下標頭：

"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"

但是，這導致了一個新錯誤，指出“Access-Control-Allow-Headers”標頭不允許“Access-Control-Allow-Origin”標頭。

解決方案：標頭限制和預設內容類型

對於跨域請求，如果內容類型未設定為以下三種特定類型之一，瀏覽器將傳送預檢選項請求：「application/x-www-form-urlencoded」 、「multipart/form-data」或「text/plain」。

預設情況下，Angular 將內容類型設為“application/json”，這不是跨域請求可接受的類型之一。這會觸發預檢 OPTIONS 請求，但由於「Access-Control-Allow-Headers」標頭的限制，該請求被拒絕。

要解決此問題，開發人員可以覆寫 Angular 中的預設內容類型或允許伺服器端使用「Access-Control-Allow-Headers」標頭。

覆蓋預設標頭的 Angular 範例：

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

以上是為什麼在 Angular 中使用 POST 請求發送檔案時，「Access-Control-Allow-Headers」中不允許我的「Access-Control-Allow-Origin」標頭？的詳細內容。更多資訊請關注PHP中文網其他相關文章！