「https://googledocs-clone-sbayrak.netlify.app/」から「https://googledocs-clone-sbayrak.herokuapp.com/」に接続しようとすると CORS エラーが発生するのはなぜですか?

「https://googledocs-clone-sbayrak.netlify.app/」からのクロスオリジン リクエストを許可します

CORSエラーは、クライアントとサーバーの設定の間で構成が一致しないために発生します。このシナリオでは、「https://googledocs-clone-sbayrak.netlify.app/」のクライアント アプリケーションが「https://googledocs-clone-sbayrak.herokuapp.com/」のサーバー エンドポイントに接続しようとしています。ただし、サーバーは「https://googledocs-clone-sbayrak.netlify.app/」からのリクエストのみを受け入れるように構成されています。リクエストの元のヘッダーが許可された値と一致しないため、CORS エラーが発生します。

CORS エラーの解決

このエラーを解決する鍵は次のとおりです。サーバー上で許可されているオリジンがリクエストのオリジンと一致することを確認します。エラーの原因となった不適切な構成は、許可されたオリジンとして「https://googledocs-clone-sbayrak.netlify.app/」を使用していました。ただし、Web オリジンにはパスが含まれていないため、末尾のスラッシュにより一致が失敗します。

これを修正するには、許可されたオリジンを「https://googledocs-clone-sbayrak.netlify」に更新する必要があります。 app」の末尾のスラッシュを除きます。修正された cors 設定は次のとおりです。

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

許可されたオリジンの値から末尾のスラッシュを削除することで、リクエストのオリジン ヘッダーと正しく一致するようになり、クロスオリジン リクエストが成功し、クライアントがサーバー。

以上が「https://googledocs-clone-sbayrak.netlify.app/」から「https://googledocs-clone-sbayrak.herokuapp.com/」に接続しようとすると CORS エラーが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。