「https://example.com/」を許可したにもかかわらず、オリジン「https://example.com」からのアクセスがブロックされました

クロスオリジンのリソースにアクセスしようとすると、開発者は Access-Control-Allow-Origin ヘッダーに関連する問題に遭遇することがよくあります。これらの問題を解決する鍵は、CORS プロトコルのコンテキストにおける「オリジン」の正確な意味を理解することにあります。

CORS におけるオリジンの概念

In CORS では、オリジンはスキーム、ホスト (ドメイン)、ポートの組み合わせです。重要なのは、パスが含まれていないことです。したがって、次の 2 つの起源は別のものとみなされます:

• https://example.com
• https://example.com/path/to/resource

問題: Origins の末尾のスラッシュ

この特定のケースの問題は、次の定義の誤解から生じています。 起源。具体的には、CORS プロトコル仕様に従って、許可されたオリジンの末尾のスラッシュは許可されません。その結果、ブラウザによって送信されたオリジン ヘッダー (末尾のスラッシュなし) は、サーバーで構成された許可されたオリジンと一致しません。

解決策: 許可されたオリジンから末尾のスラッシュを削除します

この問題を解決するには、CORS 構成で許可されている起点の値から末尾のスラッシュを削除するだけです。この場合、許可される正しいオリジンは次のようになります:

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

この変更により、ブラウザのオリジン ヘッダーが許可されたオリジンと一致し、CORS は正常に許可されます。