使用IGDB API时遭遇CORS跨域拦截问题（React.js环境）

问题根源 #

你现在是直接从前端请求IGDB的API，但IGDB服务器没有给http://localhost:3000开启跨域权限，浏览器的同源策略会拦截这种请求。你自己后端的CORS配置只对前端请求你的后端有效，管不到前端直接请求第三方API的情况。

正确解决方案：通过后端代理转发请求 #

前端不要直接调用IGDB，而是请求自己的后端，让后端去调用IGDB API，再把结果返回给前端，这样就绕开了CORS限制。

1. 修改前端请求代码

把请求地址改成你后端的代理接口，比如/api/igdb/artworks：

const gameStartHandler = async () => {
    setIsStartGame(true);
    axios.post("/api/igdb/artworks", {
        data: "fields alpha_channel,animated,checksum,game,height,image_id,url,width;"
    }).then((res) => {
        console.log(res.data)
    }).catch(err => console.error(err));
};

2. 后端添加代理路由

在你的后端（比如Express）里新增一个接口，负责转发请求到IGDB，记得带上必要的请求头（IGDB要求Client-ID和Authorization令牌，你之前漏了令牌）：

const axios = require('axios');

// 代理IGDB artworks请求
app.post('/api/igdb/artworks', async (req, res) => {
    try {
        // 注意：这里的Client-ID和Access Token要换成你自己的，建议存在环境变量里，不要硬编码
        const igdbResponse = await axios.post(
            'https://api.igdb.com/v4/artworks',
            req.body.data,
            {
                headers: {
                    'Accept': 'application/json',
                    'Client-ID': '你的Twitch Client-ID',
                    'Authorization': 'Bearer 你的IGDB Access Token' // 必须带这个，需要用Client-ID和Secret去Twitch申请
                }
            }
        );
        res.json(igdbResponse.data);
    } catch (error) {
        res.status(error.response?.status || 500).json(
            error.response?.data || { message: '请求IGDB API失败' }
        );
    }
});

3. 修正前端的proxy配置

你之前把proxy设成http://localhost:3000完全错误，这个配置是让前端把请求转发到你的后端服务器。如果你的后端跑在http://localhost:5000，前端项目的package.json里应该改成：

"proxy": "http://localhost:5000"

额外注意点 #

• IGDB API必须带Authorization头，令牌需要你用Twitch开发者账号的Client-ID和Client Secret去申请。
• 不要在前端代码里暴露Client-ID和Client Secret，必须存在后端的环境变量中，避免安全风险。
• 你之前的后端CORS配置可以保留，确保前端能正常请求你的后端接口。

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