https://example.com を許可リストに追加したにもかかわらず CORS エラーが発生するのはなぜですか?

CORS エラー: 明示的な許可リストにもかかわらずアクセスが拒否されました

React、Node.js と Socket.IO 間のクロスオリジン リクエストを有効にしようとすると、エラー「Access from https://example.com/ を許可したにもかかわらず、オリジン 'https://example.com' はブロックされました」というメッセージが表示されます。必要な権限を追加したにもかかわらず、エラーが継続します。

原因と説明

この問題は、オリジン ヘッダーと CORS 設定で受け入れられるオリジンの誤解に起因します。

オリジン ヘッダーの末尾スラッシュ

Web オリジンヘッダーには末尾のスラッシュは含まれません。たとえば、「https://googledocs-clone-sbayrak.netlify.app/」の起源は「https://googledocs-clone-sbayrak.netlify.app」です。オリジンの末尾にスラッシュを追加する (例: "https://googledocs-clone-sbayrak.netlify.app/") は無効です。

バイトごとの比較

CORS 構成バイトごとの比較を使用して、リクエストの送信元が許可された送信元と一致するかどうかを判断します。この場合、許可される送信元は「https://googledocs-clone-sbayrak.netlify.app」ですが、リクエストの送信元は「https://googledocs-clone-sbayrak.netlify.app/」であり、不一致です。 .

許可された原点を正しく設定する

問題を解決するには、末尾のスラッシュなしで正確な原点と一致するように CORS 構成内の許可された原点を調整します:

cors: {
    origin: 'https://googledocs-clone-sbayrak.netlify.app'
}

以上がhttps://example.com を許可リストに追加したにもかかわらず CORS エラーが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。