React调用CoinMarketCap API遇CORS及404错误求助

问题分析 #

你遇到的404错误核心原因是后端路由与前端请求路径不匹配，同时存在一处无效的CORS头设置：

• 路由路径不匹配：后端Express定义的接口路由是/api，但前端React请求的是/api/currency，接口路径不对应导致404。
• 无效的CORS头设置：你把Access-Control-Allow-Origin头加在了向CoinMarketCap发起请求的headers里，这完全没用——该头应该是后端返回给前端响应时设置的，且由于你已经在React的package.json配置了proxy，proxy会自动处理跨域，无需额外设置这个头。

修正方案（二选一即可） #

方案一：修改后端路由匹配前端请求路径

将后端的路由从/api改为/api/currency，匹配前端的请求路径：

const express = require('express');
const axios = require('axios');
const app = express();
const port = process.env.PORT || 5000;

app.use(express.json());

// 修改路由为/api/currency，匹配前端请求路径
app.get('/api/currency', async (req, res) => {
  const apiKey = 'wwwwwwwwwwwwww';
  const fromCurrency = req.query.from;
  const toCurrency = req.query.to;
  const url = `http://pro-api.coinmarketcap.com/v2/cryptocurrency/quotes/latest?symbol=${fromCurrency}&convert=${toCurrency}`;

  try {
    // 移除向CoinMarketCap请求时无效的Access-Control-Allow-Origin头
    const response = await axios.get(url, {
      headers: {
        'X-CMC_PRO_API_KEY': apiKey
      },
    });
    const data = response.data.data[fromCurrency];
    res.json(data);
  } catch (error) {
    console.error('Error fetching data from CoinMarketCap:', error);
    res.status(500).json({ error: 'Failed to fetch data from CoinMarketCap' });
  }
});

app.listen(port, () => console.log(`Listening on port ${port}`));

方案二：修改前端请求路径匹配后端路由

保持后端路由/api不变，调整前端的请求路径：

// ...
useEffect(() => {
  const fetchData = async () => {
    try {
      // 修改请求路径为/api，匹配后端路由
      const response = await Axios.get(`/api?from=${from}&to=${to}`);
      const data = response.data;
      setInfo(data);
    } catch (error) {
      console.error('Error fetching data from backend:', error);
    }
  };
  fetchData();
}, [from, to]);
// ...

额外注意事项 #

1. 确保Express服务已启动在5000端口，React开发服务运行在3000端口，package.json中的"proxy": "http://127.0.0.1:5000"配置正确。
2. 不要在向第三方API（如CoinMarketCap）的请求中添加Access-Control-Allow-Origin头，该头仅用于后端对前端响应时的跨域标识。

内容的提问来源于stack exchange，提问作者André Luís