CORS ポリシーが末尾にスラッシュを含む「https://example.com/」からのリクエストをブロックするのはなぜですか?

オリジン 'https://example.com/' からのアクセスは CORS ポリシーによってブロックされました: プリフライト要求への応答はアクセス制御チェックに合格しません: 合格しますHTTP OK ステータスがありません。

TL;DR

Web オリジンにはパスが含まれていません。したがって、https://googledocs-clone-sbayrak.netlify.app/ は有効な Web オリジンではありません。末尾のスラッシュを削除します。

CORS の Web オリジンの詳細

オリジン ヘッダーの値に末尾のスラッシュは使用できません

CORS プロトコル (Fetch 標準で指定) によれば、ブラウザーは Origin 要求ヘッダーを末尾にスラッシュのある値に設定することはありません。したがって、https://googledocs-clone-sbayrak.netlify.app/whatever のページがクロスオリジン リクエストを発行する場合、そのリクエストの Origin ヘッダーには末尾のスラッシュのない

https://googledocs-clone-sbayrak.netlify.app

が含まれます。

サーバー側でのバイトごとの比較

Node.js cors パッケージに依存する Socket.IO を使用しています。リクエストのオリジンが CORS 構成のオリジン値 (https://googledocs-clone-sbayrak.netlify.app/) と正確に一致しない場合、そのパッケージは応答に Access-Control-Allow-Origin を設定しません。

すべてをまとめて

明らかに、

'https://googledocs-clone-sbayrak.netlify.app' ===
'https://googledocs-clone-sbayrak.netlify.app/'

は false と評価されるため、cors パッケージは Access-Control-Allow-Origin を設定しません。これにより、ブラウザで CORS チェックが失敗し、CORS エラーが発生します。

Fetch Standard からの例

Access-Control-Allow-Origin: https://rabbit.invalid/

のセクション 3.2.5 Fetch Standard では、この間違いのわかりやすい例も提供しています:

そして、それが CORS チェックの失敗の原因となる理由を説明しています:

Aシリアル化されたオリジンには末尾のスラッシュがありません。

以上がCORS ポリシーが末尾にスラッシュを含む「https://example.com/」からのリクエストをブロックするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。