在Axios GET请求中传入X-Auth-Token后遇CORS错误，求解决方案

方法一：React开发环境配置代理（推荐） #

在项目根目录的package.json中添加代理字段，将API请求转发到目标服务器，绕过浏览器的CORS限制：

{
  "name": "your-react-project",
  "proxy": "https://api.football-data.org"
}

修改前端请求代码，使用相对路径发起请求，同时修正组件中请求的执行时机和异常处理：

import axios from 'axios';
import React, { useEffect } from 'react';

function LeagueTable() {
  // 改为相对路径，由代理转发请求
  const api = '/v4/teams/19';

  useEffect(() => {
    // 把请求放到useEffect中，确保组件挂载后仅执行一次
    axios.get(api, {
      headers: {
        'X-Auth-Token': '****',
      },
    })
    .then(response => {
      // 处理返回数据
      console.log(response.data);
    })
    .catch(error => {
      // 捕获并处理异常
      console.error('请求失败:', error);
    });
  }, []);

  return (
    <div>
    </div>
  );
}

export default LeagueTable;

注意：该方案仅适用于开发环境，生产环境需要在部署服务器（如Nginx）上配置反向代理。

方法二：搭建后端代理服务器 #

自己实现一个简单的后端服务（以Node.js + Express为例），作为前端与目标API的中间层。由于后端请求不受浏览器CORS限制，可由后端代为发起请求并返回结果：
后端示例代码：

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3001;

// 代理API请求
app.get('/api/teams/19', async (req, res) => {
  try {
    const apiResponse = await axios.get('https://api.football-data.org/v4/teams/19', {
      headers: {
        'X-Auth-Token': '****'
      }
    });
    res.json(apiResponse.data);
  } catch (err) {
    res.status(err.response?.status || 500).json(err.response?.data || '请求出错');
  }
});

app.listen(PORT, () => {
  console.log(`代理服务器运行在端口${PORT}`);
});

前端修改请求地址为代理服务器地址：

const api = 'http://localhost:3001/api/teams/19';

方法三：确认API是否支持前端CORS配置 #

部分API提供商允许开发者添加前端域名到CORS白名单，或提供专门的前端访问凭证。可查阅football-data.org的官方文档，确认是否有针对前端调用的CORS配置选项，比如将你的项目域名添加到允许列表中。

内容的提问来源于stack exchange，提问作者notmoot