使用Express代理第三方API请求以解决React前端CORS问题

别担心，第一次在Stack Overflow提问格式有点小疏漏完全没关系～我帮你梳理下当前代码里的问题，以及怎么修复：

核心问题分析 #

你现在的代码有两个关键问题导致代理失败：

1. 控制器函数没有处理Express的请求/响应对象：你的getAllSteamGames只是自己调用Axios获取数据后return，但Express路由的控制器需要接收req（请求）和res（响应）参数，主动把数据发回给前端，不然前端根本拿不到返回值。
2. 路由没有挂载到Express应用上：你的app.js里没有引入并使用路由文件，导致定义的路由规则根本没生效。

分步修复代码 #

1. 修复app.js，挂载路由

首先要把你的路由文件引入到主应用中，并指定路由前缀（比如/api）：

const express = require('express');
const cors = require('cors')
// 替换成你的路由文件实际路径，比如如果路由在routes/steam.js，就写./routes/steam
const steamRouter = require('./path/to/your/router/file'); 
const app = express();
app.use(cors())
// 把路由挂载到/api路径下，前端请求时就用http://localhost:3005/api/applist
app.use('/api', steamRouter); 
module.exports = app

2. 修复控制器函数，处理请求响应

修改控制器里的函数，添加req和res参数，并在获取数据后通过res.json()返回给前端，出错时也要返回错误状态：

const axios = require('axios');

const getAllSteamGames = async (req, res) => {
  try {
    // 注意：Steam的GetAppList API正确URL不需要?applist后缀，修正一下
    const resp = await axios.get('https://api.steampowered.com/ISteamApps/GetAppList/v2/')
    // 把获取到的Steam API数据以JSON格式返回给前端
    res.json(resp.data); 
  } catch (error) {
    console.error('获取Steam应用列表失败:', error);
    // 出错时返回500状态码和错误信息
    res.status(500).json({ message: 'Failed to fetch Steam app list' });
  }
}

// 另外两个控制器函数也要做类似修改，比如getSingleGameSteam：
const getSingleGameSteam = async (req, res) => {
  try {
    // 从URL参数中获取游戏ID
    const gameId = req.params.id;
    // 替换成你需要调用的Steam具体API URL，这里举个例子
    const resp = await axios.get(`https://api.steampowered.com/ISteamUserStats/GetSchemaForGame/v2/?appid=${gameId}`);
    res.json(resp.data);
  } catch (error) {
    console.error('获取游戏详情失败:', error);
    res.status(500).json({ message: 'Failed to fetch game details' });
  }
}

// getSingleGameSpy同理修改
module.exports = {
  getAllSteamGames,
  getSingleGameSteam,
  getSingleGameSpy
}

3. 前端请求方式调整

前端不要再直接请求Steam的API，而是请求你的Express服务器的代理路径，比如：

// 前端React代码示例
fetch('http://localhost:3005/api/applist')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err))

验证修复 #

启动你的Express服务器后，前端请求上述代理路径，应该就能正常获取Steam API的数据，同时不会再遇到CORS错误了。

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