1. ホーム
  2. ジャバスクリプト

[解決済み】リクエストヘッダーフィールドのAccess-Control-Allow-Headersが許可されない。

2022-04-19 01:56:53

質問

postリクエストでサーバーにファイルを送信しようとしているのですが、送信するとエラーになります。

リクエストヘッダーフィールドの Content-Type は Access-Control-Allow-Headers で許可されていません。

そこで、このエラーをググって、ヘッダーを追加してみました。

$http.post($rootScope.URL, {params: arguments}, {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-Originは、Access-Control-Allow-Headersで許可されません。

というわけで、ググってみたところ、似たような質問は半分だけ回答があり、その後オフトピックとして閉じられました。どのようなヘッダを追加/削除すればよいのでしょうか?

解決方法は?

その サーバー (POSTリクエストの送信先)には Access-Control-Allow-Headers ヘッダー そのレスポンスに . クライアントからのリクエストにそれらを入れても、何の効果もありません。 POST リクエストから 'Access-Control-Allow-...' ヘッダを削除する必要があります。

これは、クロスオリジンリクエストを受け入れることを指定するのはサーバー次第だからです(そして、そのために Content-Type リクエストヘッダなど) - クライアントは、あるサーバーがCORSを許可すべきかを自ら決定することはできません。

リクエスト側(ウェブブラウザ)は、「OPTIONS」リクエスト(つまり、あなたが意図する「POST」や「GET」リクエストではない)を送ることによって、サーバーのSame Origin Policyが何であるかを「プリフライ」テストすることができます。 OPTIONS」リクエストへの応答が、あなたのリクエストが使っているヘッダー、オリジン、メソッドを許可する「Access-Control-Allow-...」ヘッダーを含んでいれば、リクエスター/ブラウザはあなたの「POST」または「GET」リクエストを送信します。

(曖昧な注記:) Access-Control-Allow-...の値は、'Access-Control-Allow-...'です。 は、特定のオリジン、ヘッダー、または許可されるメソッドをリストアップするのではなく、'。 しかし、私が使っていた古いAndroid WebViewクライアントでは、' のワイルドカードを使用し、OPTIONSリクエストのレスポンスにAccess-Control-Allow-Headersヘッダーに記載されている特定のヘッダーを必要としました。