React生产环境Axios请求异常：返回首页HTML而非API数据

setupProxy.js是Create React App专属的本地开发代理配置，仅在npm start启动的开发服务器中生效。打包部署后，项目是纯静态文件，该配置不会被带入生产环境。此时前端请求/api会被生产服务器（如Nginx）当作静态资源路径，找不到对应文件时就会返回SPA的首页HTML（SPA路由默认fallback到index.html）。

方案一：生产服务器配置反向代理（以Nginx为例） #

如果前端部署在Nginx上，修改Nginx配置，将/api请求转发到第三方API：

server {
    listen 80;
    server_name 你的域名;

    # 托管前端静态文件，处理SPA路由
    location / {
        root /你的前端build文件夹路径;
        try_files $uri $uri/ /index.html;
    }

    # 配置/api代理转发
    location /api {
        proxy_pass 第三方API地址;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_ssl_verify off; # 对应本地配置的secure:false
    }
}

方案二：搭建Node/Express中间层代理 #

如果无法修改服务器配置，或第三方API不支持CORS，可自己搭建Node中间层转发请求：

1. 编写Express服务代码（server.js）：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const cors = require('cors');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3001;

// 允许跨域
app.use(cors());
// 解析JSON请求体
app.use(express.json());

// 代理/api到第三方API
app.use('/api', createProxyMiddleware({
    target: '第三方API地址',
    secure: false,
    changeOrigin: true,
}));

// 托管前端静态文件（若和中间层一起部署）
app.use(express.static(path.join(__dirname, 'build')));
// SPA路由fallback
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

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

2. 部署步骤：

• 执行npm run build打包前端
• 将build文件夹和server.js一同部署
• 启动Node服务（如node server.js），前端请求/api会被中间层转发到第三方API

额外检查点 #

• 确认生产环境前端请求的/api路径是否正确，若部署在子目录下需调整请求路径
• 若第三方API支持CORS，可直接在前端设置Axios的baseURL为第三方API地址，但需注意MERCHANT_KEY暴露在前端的安全风险

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