web-dev-qa-db-ja.com

CORSの問題：ヘッダーに複数の値が含まれていますが、許可されているのは1つだけです

私はこれの解決策を1時間頭痛で見つけようとしましたが、もう一歩踏み出すことができなかったので、somenoneがいくつかの指針を与えて、私にいくつかの頭痛を救ってくれることを願っています：

バックエンドAPIからaxiosを介してデータをフェッチする必要があるフロントエンドがあります。私のバックエンドには、次の部分を持つ.htaccessがあります。

<IfModule mod_headers.c>
        Header set X-Content-Type-Options "nosniff"
        Header set X-XSS-Protection "1; mode=block"
        # Always set these headers for CORS.
        Header always set Access-Control-Max-Age 1728000
        Header always set Access-Control-Allow-Origin: "*"
        Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
        Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,C$
        Header always set Access-Control-Allow-Credentials true
</IfModule>

したがって、どこからでも発信できるようにする必要があります。ここまでは順調ですね。

ここで、axiosを呼び出して、送信されるヘッダーを呼び出します。

enter image description here

このように見える。

これで、応答ヘッダーに2つのaccess-control-allow-Originがあり、問題が発生するようです。

私が得ているエラー：

Originからの ' http：//apidomain.test/api/previews/v1/preview/？id = 726＆_wpnonce = 025ff5c5fa 'でのXMLHttpRequestへのアクセス ' http：// localhost：30 'がCORSポリシーによってブロックされました：プリフライトリクエストへの応答がアクセス制御チェックに合格しません：' Access-Control-Allow-Origin 'ヘッダーに複数の値が含まれています' *、 http：// localhost：300 'ですが、許可されるのは1つだけです。

どうすれば修正できますか？

-複数の値を許可するにはどうすればよいですか（これは何らかの方法で悪いことになります）–または、最初に2つの値でこの混乱を防ぐにはどうすればよいですか？

送信されているaxiosヘッダーと関係があります（以前はトレースを使用していましたが、追加する代わりにaxiosヘッダーを設定すると効果があると思いましたが、どういうわけかそれはどこにもつながりません）。

（私は特別なことは何もしていません：axios.get（ 'url'、withCredentials：true、transformResponse：[いくつかの変換...]）。

ここで私を助けてください。

乾杯と事前に感謝します。

J

javascriptcorscross-domainaxios
2
Merc

どうすれば複数の値を許可できますか（これは何らかの方法で悪いでしょう）

できません（ブラウザはサポートしていません）。

または、どうすれば最初に2つの値でこの混乱を防ぐことができますか？

ヘッダーを設定している2ビットのコードの1つを削除します。

これはそのうちの1つです。

Header always set Access-Control-Allow-Origin: "*"

Somewherehttp://localhost:3000セクションを追加するコードがあります。

それらの1つを削除します。

送信されるaxiosヘッダーと関係があります

確かに直接ではありません。上で述べたコードの他のビットmightは、要求ヘッダーに基づいて動的に動作します。

1
Quentin