「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 を無効にし、不透明な応答も作成します。不透明な応答には、次のような特定の制限があります。
