如何在服务端发起Axios GET请求并返回给React客户端，解决CORS问题

嘿，我看你现在卡在两个点上：一是怎么让服务端把第三方API的结果传给React客户端，二是解决烦人的CORS报错。其实这俩问题可以一起搞定，核心思路就是用服务端做代理——因为浏览器的同源策略管不到服务器之间的请求，刚好能绕开CORS，同时完成响应转发。

第一步：先搞定CORS（通过服务端代理绕开） #

直接让React客户端请求第三方API肯定会触发CORS，这是浏览器的同源策略限制。正确的做法是：

• 让React客户端请求你自己的服务端接口
• 由你的服务端去请求第三方API，再把结果返回给客户端

如果你的React客户端和服务端是不同端口（比如React跑在3000，服务端跑在5000），还需要在服务端配置CORS允许客户端的域名访问：
首先安装cors中间件：

npm install cors

然后在服务端代码里引入并配置：

const cors = require('cors');
const app = express();

// 允许你的React客户端域名访问（开发环境示例）
app.use(cors({ origin: 'http://localhost:3000' }));
// 生产环境建议指定具体域名，不要用通配符
// app.use(cors({ origin: 'https://your-react-app-domain.com' }));

第二步：服务端实现API转发并返回结果 #

你现在的服务端代码只是发起了Axios请求，但没有把结果返回给客户端。需要创建一个专门的代理路由，在路由里完成请求转发：

const express = require('express');
const axios = require('axios');
const cors = require('cors');
const app = express();

app.use(cors({ origin: 'http://localhost:3000' }));
app.use('/', express.static('public')); // 保留你的静态文件服务

// 新增代理路由，专门处理第三方API转发
app.get('/api/proxy-third-party', async (req, res) => {
  try {
    const thirdPartyApiUrl = '替换成你实际要请求的第三方API地址';
    // 发起第三方API请求，带上你的Authorization头
    const apiResponse = await axios.get(thirdPartyApiUrl, {
      headers: {
        Authorization: 'Bearer 你的token内容' // 这里补全你的有效token
      }
    });
    // 把第三方API的响应直接返回给React客户端
    res.status(apiResponse.status).send(apiResponse.data);
  } catch (err) {
    // 错误处理，把错误信息返回给客户端方便调试
    console.error('请求第三方API失败:', err);
    const errorStatus = err.response?.status || 500;
    const errorData = err.response?.data || '服务器内部错误';
    res.status(errorStatus).send(errorData);
  }
});

// 启动服务，记得端口和客户端请求的一致
app.listen(5000, () => {
  console.log('服务端运行在 http://localhost:5000');
});

第三步：修改React客户端代码，请求服务端代理路由 #

把原来直接请求第三方API的代码改成请求你的服务端代理接口：

componentDidMount = () => {
  console.log('app loading...');
  // 改成请求服务端的代理路由，而不是直接请求第三方API
  axios.get('http://localhost:5000/api/proxy-third-party')
    .then((res) => {
      console.log(res.data, 'res'); // 这里就能拿到第三方API的返回数据了
    })
    .catch(err => {
      console.error('请求失败:', err);
    });
}

为什么这样能解决问题？ #

• React客户端现在请求的是你自己的服务端，只要配置了cors中间件允许客户端的源，就不会触发CORS报错
• 服务端请求第三方API是在服务器端进行的，不受浏览器同源策略限制，自然不会有CORS问题

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