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 中修改 fetch 请求，添加自定义标头并有效处理错误。

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;

方案三：使用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（跨源资源共享）是浏览器强制执行的安全策略，用于防止来自不受信任域的恶意请求。它确保只允许某些域从服务器获取资源。
3. 为什么我收到“未处理的拒绝（类型错误）：无法获取”？
4. 当您的 API 请求由于 CORS 限制而被阻止时，通常会发生此错误。它也可能是由不正确的 API URL 或服务器问题引起的。
5. 什么是 useEffect 钩子在这种情况下做什么？
6. 这 useEffect React中的hook用于在组件挂载后触发API请求。它确保获取操作在正确的时间发生，从而防止多个不必要的请求。
7. 如何修复 React 应用程序中的 CORS 错误？
8. 要修复 CORS 错误，您可以使用后端代理，设置正确的标头 res.setHeader 在服务器中，或依赖 CORS-Anywhere 等服务进行开发。
9. 我可以在生产中使用 CORS 浏览器扩展吗？
10. 不可以，CORS 浏览器扩展只能用于开发。在生产中，在服务器上配置 CORS 或使用代理服务器更安全。

关于在 React 中管理 CORS 错误的最终想法

在开发使用第三方 API 的 React 应用程序时，CORS 错误是一个常见的挑战。尽管浏览器扩展可以帮助开发，但在生产环境中实施更可靠的解决方案（例如代理服务器）以维护安全性和数据完整性至关重要。

通过使用正确的技术（例如错误处理和后端解决方案），开发人员可以有效地处理“无法获取”等问题。这确保了他们的应用程序在与 API 交互时提供流畅的用户体验，从而增强性能和功能。