React中http-proxy-middleware本地正常，部署后主服务器代理失效报404求助

http-proxy-middleware 是开发环境专属的代理工具，它依赖本地开发服务器（比如 Create React App 内置的 devServer）的 Node.js 运行环境来生效。执行 npm run build 后生成的是纯静态 HTML/CSS/JS 文件，没有 Node.js 环境支撑代理逻辑，部署到服务器后自然无法触发代理规则，导致请求404。

方案1：服务器端配置反向代理（推荐） #

这是生产环境最常用的方式，通过服务器（如 Nginx、Apache）来转发请求：

Nginx 配置示例 #

在你的 Nginx 站点配置的 server 块中添加：

location /api {
    proxy_pass https://backend_api.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

配置后重启 Nginx 即可生效。

Apache 配置示例 #

先确保启用 mod_proxy 和 mod_proxy_http 模块，然后在站点配置中添加：

ProxyPass /api https://backend_api.com
ProxyPassReverse /api https://backend_api.com

重启 Apache 后生效。

方案2：前端直接请求完整API地址（需后端允许跨域） #

修改前端代码中的请求路径，把相对路径 /api/xxx 替换为完整的绝对路径 https://backend_api.com/api/xxx。注意：这种方式需要后端服务器配置 CORS（跨域资源共享）规则，允许你的前端域名访问，否则会出现跨域错误。

方案3：部署在Node.js服务器上（自定义服务托管静态文件） #

如果你的部署环境是 Node.js（比如 Express），可以在 Node.js 服务中复用代理配置，同时托管 build 后的静态文件：

1. 安装依赖：

npm install express http-proxy-middleware

2. 创建服务文件（比如 server.js）：

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

const app = express();

// 配置代理
app.use('/api', createProxyMiddleware({
    target: 'https://backend_api.com',
    changeOrigin: true
}));

// 托管静态文件
app.use(express.static(path.join(__dirname, 'build')));

// 处理SPA路由
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

3. 启动服务：node server.js，然后通过该服务访问前端页面。

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