Fetch の「no-cors」モードの使用が、クロスオリジンリクエストを処理するための解決策ではないのはなぜですか?

「no-cors」モードでのフェッチの使用

フェッチ API は、サーバーにリクエストを行うための便利な方法を提供します。ただし、クロスオリジンのリソースにアクセスすると、「要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません」というエラーが発生する場合があります。このエラーは、同一オリジン ポリシーによって課されたセキュリティ制限を示しています。

フェッチで CORS を無効にするには、{ mode: 'no-cors' } オプションを使用することをお勧めします。ただし、このアプローチは間違っており、望ましくありません。

'no-cors' モード: 誤り

'no-cors' モードでは、本質的にブラウザが応答にアクセスできなくなります。ボディとヘッダー。これは、コードがフェッチされたデータを処理または使用できないことを意味します。 CORS を無効にしても、同一オリジン ポリシーはオーバーライドされないことを理解することが重要です。ブラウザが応答を処理する方法にのみ影響します。

解決策: CORS プロキシ

CORS を無効にする代わりに、CORS プロキシを使用する必要があります。プロキシは、フロントエンド コードとターゲット サーバーの間の仲介者として機能します。プロキシ経由でリクエストを送信すると、プロキシはリクエストをサーバーに転送し、レスポンスを受信し、必要な Access-Control-Allow-Origin ヘッダーを追加してからコードに返します。これにより、コードがクロスオリジンで応答にアクセスできるようになります。

CORS プロキシを設定するには、既存のサービスを使用するか、Heraku などのプラットフォームを使用して独自のプロキシをデプロイできます。

理解クロスオリジンリクエスト

クロスオリジンでリソースにアクセスできる場合でも、注意することが重要です。 Postman、ブラウザーは、Web アプリで実行されるフロントエンド コードに制限を課します。クロスオリジン リソース アクセスを保証するには、応答に Access-Control-Allow-Origin ヘッダーを含める必要があります。

不透明な応答: 注意事項

「no-cors」モードは CORS を無効にし、不透明な応答も作成します。不透明な応答には、次のような特定の制限があります。

1. 応答ヘッダーまたは本文コンテンツを読み取ることができない
2. 非 HTML コンテキストで応答を使用できない ($