ReactJS: Chrome CORS プラグインを追加した後、未処理の拒否 (TypeError) がフェッチに失敗する

React での API エラーの処理: CORS プラグインの課題

API を使用する場合 、開発者は、特にサードパーティ API を扱う場合に、データの取得に関連するさまざまな課題に遭遇することがよくあります。よく発生する問題の 1 つは、「未処理の拒否 (TypeError): フェッチに失敗しました」エラーです。このエラーは、多くの開発者が Web アプリケーションを強化するために使用している Swiggy のレストラン リスト API などの一般的な API を使用している場合でも発生する可能性があります。

この場合、CORS Chrome 拡張機能を追加することが、制限的なブラウザー ポリシーをバイパスするための実行可能な解決策のように思えるかもしれません。ただし、問題が解決されるのではなく、新たな問題が発生する可能性があります。開発環境で CORS プラグインを使用していて、API リクエストがロード直後に失敗する場合は、プラグインがブラウザのリクエスト処理動作と競合するという問題が発生している可能性があります。

クロスオリジンリクエストの管理方法とトラブルシューティング方法を理解する ReactJS の開発プロセスはスムーズな開発プロセスに不可欠です。 Swiggy のような API には、承認されていないクライアントからのアクセスを制御するために、CORS などのセキュリティ層が組み込まれていることがよくあります。これらの制限によりエラーが発生する可能性があり、適切に対処する必要があります。

このガイドでは、特に Chrome に CORS プラグインを追加した後にこのエラーが発生する理由を調べます。また、Swiggy API を使用して問題を解決する戦略についても説明します。 アプリケーション。

指示	使用例
fetch()	このコマンドは、Swiggy API への HTTP リクエストを行うために使用されます。リソースを非同期にフェッチし、Response オブジェクトに解決される Promise を返します。 API からレストランのデータを取得するためのキーです。
useEffect()	React で使用されるこのフックを使用すると、コンポーネントのレンダリング後に API 呼び出しなどの副作用を実行できます。これにより、コンポーネントがマウントされると、Swiggy の API へのフェッチ要求が確実に行われます。
res.setHeader()	この Express コマンドは、次のようなカスタム HTTP ヘッダーを設定します。 これは CORS の処理において重要です。これにより、バックエンドがあらゆるオリジンからのリクエストを許可できるようになり、CORS エラーが防止されます。
res.json()	このメソッドは、JSON 応答をクライアントに送り返すために使用されます。プロキシ サーバー ソリューションでは、Swiggy から取得した API データが JSON 形式で返されることが保証され、フロントエンドが簡単に利用できます。
await	このキーワードは、フェッチ操作が解決されるまで非同期関数の実行を一時停止し、コードが続行する前に API のデータを待機するようにし、未処理の拒否を防ぎます。
express()	の 関数は、Express サーバーのインスタンスを作成するために使用されます。このサーバーは、フロントエンドと Swiggy API の間のプロキシとして機能し、データ取得中の CORS の問題を防ぎます。
app.listen()	このコマンドにより、Express サーバーは指定されたポート (たとえば、この場合はポート 5000) で受信リクエストのリッスンを開始します。これは、開発中にプロキシ サーバーをローカルでホストするために重要です。
try...catch	このブロックは、ネットワーク障害や Swiggy API の問題など、フェッチ リクエスト中に発生する可能性のあるエラーを処理します。これにより、アプリがクラッシュせずにエラーを適切に処理できるようになります。

Swiggy API を使用した React における CORS 問題の解決策の説明

最初のソリューションでは、 Swiggy の API からレストラン データを取得するときに、Express を使用して CORS 問題を回避するバックエンド。 CORS ポリシーは、ドメインが許可しない限り、ブラウザーが別のドメインにリクエストを送信することを禁止します。シンプルなサーバーを作成することで、クライアントと API の間の中間層として機能し、サーバー側でデータを取得して React フロントエンドに返すことができます。このメソッドは、リクエストがクライアント アプリと同じオリジンから送信されるため、CORS エラーを回避します。

Express バックエンドはカスタム ヘッダー、特に これにより、クライアントは CORS の制限に直面することなくリソースをリクエストできるようになります。 Swiggy の API へのフェッチ呼び出しはサーバー側で行われ、データは JSON 形式で返されます。このアプローチは API キーや機密情報を隠すため、実稼働環境ではより安全でパフォーマンスが高いと考えられています。さらに、try-catch を使用すると、API が応答しない場合にわかりやすいエラー メッセージが表示されるため、適切なエラー処理が保証されます。

2 番目のソリューションでは、クライアント側の React コードでフェッチ リクエストを変更します。この方法では、フェッチ呼び出しにカスタム ヘッダーを追加して、API に到達する前にリクエストが正しくフォーマットされていることを確認します。 Reactのものを使用しています フックを使用して、コンポーネントのマウント時に API 呼び出しをトリガーします。非同期関数は API 応答を待機し、それを JSON に変換し、要求が失敗した場合はエラーを処理します。ただし、API がブラウザーからのクロスオリジン要求を直接許可しない場合、このソリューションでも依然として CORS の問題が発生します。

最後に、3 番目のソリューションでは、CORS-Anywhere と呼ばれるサードパーティ サービスを使用します。これは、API リクエストをサーバー経由で再ルーティングすることで CORS 制限を一時的に回避するのに役立つミドルウェア サービスです。このソリューションは開発環境では機能しますが、セキュリティ リスクと外部サービスへの依存のため、運用環境ではお勧めできません。また、データ取得プロセスに追加のレイヤーが追加されるため、パフォーマンスのオーバーヘッドも発生します。この方法の使用はテスト段階では便利ですが、本番環境ではセキュリティ上の理由から避けるべきです。

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const port = 5000;

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET');
  next();
});

app.get('/restaurants', async (req, res) => {
  try {
    const response = await fetch('https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798');
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: 'Failed to fetch restaurants' });
  }
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

import React, { useEffect } from 'react';

const Body = () => {
  async function getRestaurants() {
    try {
      const response = await fetch(
        'https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798',
        { headers: { 'Content-Type': 'application/json' } }
      );

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Fetch error:', error);
    }
  }

  useEffect(() => {
    getRestaurants();
  }, []);
};

export default Body;

const Body = () => {
  async function getRestaurants() {
    try {
      const response = await fetch(
        'https://cors-anywhere.herokuapp.com/https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798'
      );

      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error fetching restaurants:', error);
    }
  }

  useEffect(() => {
    getRestaurants();
  }, []);
};

export default Body;

API リクエストにおける CORS 問題のトラブルシューティング

React アプリケーション、特に Swiggy などのサードパーティ API を使用する場合に「フェッチに失敗しました」エラーが発生する根本的な理由の 1 つは次のとおりです。 (クロスオリジンリソース共有) の制限。 CORS は、Web アプリケーションがサービスを提供したドメインとは異なるドメインにリクエストを送信することを制限するセキュリティ機能です。この場合、リクエストは別のドメイン (React アプリ) から発信されているため、Swiggy API はリクエストを拒否します。これは、クロスオリジンリクエストを明示的にサポートしていない API からデータを取得する場合に特に問題になります。

一般的な回避策は、「Allow CORS」Chrome 拡張機能などのブラウザ拡張機能を使用することです。ただし、このような拡張は一貫性のない結果につながる可能性があります。これは、API リクエストと常に適切に同期するとは限らないブラウザレベルの設定を操作するためです。これらのプラグインは、運用環境ではなく、開発のみに使用するのが理想的です。運用環境の場合、より安全で信頼性の高いアプローチは、前に提供したソリューションに見られるように、React アプリに代わってデータを要求するバックエンド プロキシ サーバーを使用することです。

考慮すべきもう 1 つの側面は、エラーを効果的に処理することです。 CORS の問題は「取得に失敗しました」エラーの一般的な原因ですが、ネットワークの不安定性、不正な API URL、サーバーのダウンタイムなどの他の要因によってもこのエラーが発生する可能性があります。したがって、実装することが重要です コード内、特にサードパーティ API を使用する場合。適切なエラー処理メカニズムは、問題をより効果的にデバッグするのに役立ち、何か問題が発生したときにユーザーフレンドリーなメッセージを提供します。

1. CORS とは何ですか?なぜ重要ですか?
2. CORS (Cross-Origin Resource Sharing) は、信頼できないドメインからの悪意のあるリクエストを防ぐためにブラウザーによって強制されるセキュリティ ポリシーです。これにより、特定のドメインのみがサーバーからリソースを取得できるようになります。
3. 「未処理の拒否 (TypeError): フェッチに失敗しました」が表示されるのはなぜですか?
4. このエラーは通常、CORS 制限により API リクエストがブロックされた場合に発生します。また、API URL が間違っていたり、サーバーの問題が原因で発生する可能性もあります。
5. は何ですか この文脈ではフックはどうするでしょうか？
6. の React のフックは、コンポーネントがマウントされた後に API リクエストをトリガーするために使用されます。これにより、フェッチ操作が適切なタイミングで実行されるようになり、複数の不要なリクエストが発生するのを防ぎます。
7. React アプリケーションの CORS エラーを修正するにはどうすればよいですか?
8. CORS エラーを修正するには、バックエンド プロキシを使用し、適切なヘッダーを設定します。 サーバー内で使用することも、開発目的で CORS-Anywhere などのサービスに依存することもできます。
9. CORS ブラウザ拡張機能を運用環境で使用できますか?
10. いいえ、CORS ブラウザ拡張機能は開発のみに使用してください。運用環境では、サーバー上で CORS を構成するか、プロキシ サーバーを使用する方が安全です。

CORS エラーは、サードパーティ API を使用する React アプリケーションを開発する際の一般的な課題です。ブラウザ拡張機能は開発に役立ちますが、セキュリティとデータの整合性を維持するには、プロキシ サーバーなどのより信頼性の高いソリューションを運用環境に実装することが重要です。

エラー処理やバックエンド ソリューションなどの適切な手法を使用することで、開発者は「フェッチに失敗しました」などの問題を効率的に処理できます。これにより、アプリケーションは API と対話するときにスムーズなユーザー エクスペリエンスを提供し、パフォーマンスと機能が向上します。