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

解決策 1: プロキシ サーバーでの CORS 問題の処理

このソリューションでは、Node.js バックエンド プロキシ サーバーを使用して CORS エラーを回避し、Swiggy API からデータを正しくフェッチします。

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}`);
});

解決策 2: カスタム ヘッダーとエラー処理でフロントエンド フェッチを使用する

このアプローチでは、React でフェッチ リクエストを直接変更し、カスタム ヘッダーを追加してエラーを効果的に処理します。

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;

解決策 3: 開発に CORS-Anywhere ミドルウェアを使用する

この方法では、「CORS-Anywhere」サービスを使用して、開発モード中に CORS 制限をバイパスします。このソリューションは運用環境では使用しないでください。

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;

React の CORS と API リクエストに関するよくある質問

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

React での CORS エラーの管理に関する最終的な考え

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

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