☰

リクエストヘッダーフィールドAccess-Control-Allow-HeadersはAccess-Control-Allow-Headersによって許可されていません質問する

tag-icon • tag-icon javascript angularjs post header cors
リクエストヘッダーフィールドAccess-Control-Allow-HeadersはAccess-Control-Allow-Headersによって許可されていません質問する

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 によって許可されていません。

そこでグーグルで検索してみたところ、唯一見つかった類似の質問は、半分の回答しか得られず、トピック外としてクローズされていました。どのヘッダーを追加/削除すればよいのでしょうか?

ベストアンサー1

私も同じ問題を抱えていました。jQueryのドキュメントで次のことが分かりました:

application/x-www-form-urlencodedクロスドメイン リクエストの場合、コンテンツ タイプを、 、以外に設定するmultipart/form-dataと、text/plainブラウザからサーバーにプリフライト OPTIONS リクエストが送信されます。

したがって、サーバーはクロスオリジン リクエストを許可しますが、 は許可しないためAccess-Control-Allow-Headers、エラーがスローされます。 デフォルトでは、Angular コンテンツ タイプは でありapplication/json、OPTION リクエストを送信しようとしています。Angular のデフォルト ヘッダーを上書きするか、Access-Control-Allow-Headersサーバー側で許可してみてください。Angular のサンプルを次に示します。

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

おすすめ記事