React proxy在npm run build后失效，如何解决后端通信问题？

核心问题 #

1. package.json中的proxy配置是Create React App开发服务器（npm start）专属，仅在开发阶段生效。执行npm run build后，项目编译为静态文件，该配置完全失效，没有服务端负责转发请求。
2. 直接写http://backend:8080无法访问，是因为前端代码在浏览器中运行，浏览器无法解析backend这个内部域名（该域名通常仅后端服务所在的服务器/容器内部可识别）。

解决方案一：在Express服务中添加反向代理 #

通过server.js配置代理，让Express帮前端转发请求到后端服务器：

1. 安装代理依赖：

npm install http-proxy-middleware --save

2. 修改server.js，添加代理配置：

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

const app = express();
const port = 3000;

// 配置反向代理：匹配/member开头的请求，转发到后端
app.use('/member', createProxyMiddleware({
  target: 'http://backend:8080',
  changeOrigin: true,
}));

app.get("/ping",(req,res) =>{
    res.send("pong");
});

// 修正静态文件路径（原两行存在冲突，保留正确路径即可）
app.use(express.static(path.join(__dirname,"build")));

app.get("/*",(req,res) => {
    res.set({
        "Cache-Control":"no-cache, no-store, must-revalidate",
        Pragma:"no-cache",
        Date:Date.now()
    });
    res.sendFile(path.join(__dirname,"build","index.html"));
});

http.createServer(app).listen(port,()=>{
    console.log(`app listening at ${port}`);
});

3. 前端保持原有请求写法即可：

axios.get('/member/login',{
  headers :{
    Authorization : hash
  }
})

解决方案二：配置前端环境变量 #

通过环境变量指定生产环境的API地址，让前端直接请求正确的公网地址：

1. 在项目根目录创建.env.production文件，写入：

REACT_APP_API_BASE_URL=http://你的服务器公网IP:8080
# 若后端有域名，可写http://your-backend-domain.com:8080

2. 前端修改axios请求代码：

axios.get(`${process.env.REACT_APP_API_BASE_URL}/member/login`,{
  headers :{
    Authorization : hash
  }
})

3. 重新执行npm run build，编译后的静态文件会自动将process.env.REACT_APP_API_BASE_URL替换为配置的地址。

额外注意事项 #

• 检查server.js中的静态文件路径：原代码包含两行app.use(express.static...)，可能存在路径冲突，需确保path.join(__dirname,"build")指向正确的build文件夹位置。
• 若后端服务与前端Express服务处于同一服务器/容器网络，解决方案一中的http://backend:8080可正常使用；若为远程服务器，则需使用公网IP或域名。

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