サーバー側で末尾にスラッシュを含むオリジンを許可しているのに CORS エラーが発生するのはなぜですか?

オリジン https://example.com/ を許可しているのに CORS エラーが発生するのはなぜですか?

CORS オリジンについて

Cross-Origin Resource Sharing (CORS) は、機密データを保護するために、サードパーティ Web サイトからのクロスオリジン リクエストを制限するメカニズムです。オリジンは、プロトコル、ドメイン、ポートの組み合わせで表されます。

末尾のスラッシュの問題

ここでの重要な問題は、許可されたオリジンに末尾のスラッシュが存在することです。 .

Web オリジンには末尾のスラッシュが含まれません。したがって、次のオリジンは無効です:

<code class="text">https://googledocs-clone-sbayrak.netlify.app/</code>

末尾のスラッシュを除いた正しいオリジンは次のとおりです:

<code class="text">https://googledocs-clone-sbayrak.netlify.app</code>

Socket.IO CORS Configuration

In Socket .IO の場合、CORS 処理に Node.js cors パッケージを使用しています。このパッケージでは、リクエストの送信元と CORS 設定で構成された送信元の値が完全に一致する必要があります。オリジンの末尾にスラッシュがあると比較は失敗し、応答に Access-Control-Allow-Origin ヘッダーが設定されません。

サーバー側コード

server.js ファイルにはCORS ミドルウェアは次のように構成されています。

<code class="javascript">const io = socketio(server, {
  cors: {
    origin: 'https://googledocs-clone-sbayrak.netlify.app/',
    methods: ['GET', 'POST'],
  },
});</code>

元の値から末尾のスラッシュを削除します。

フロントエンド リクエスト

フロントエンド コードでは、ソケット接続は次のアドレスに行われます:

<code class="javascript">const s = io('https://googledocs-clone-sbayrak.herokuapp.com/');</code>

末尾のスラッシュなしで正しい元の値を使用すると、CORS エラーは発生しなくなります。

以上がサーバー側で末尾にスラッシュを含むオリジンを許可しているのに CORS エラーが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。