MERN栈生产环境部署失败：无法访问服务端端点求助

云原生阿岚

2026-7-30

MERN栈生产环境前端无法访问后端端点的排查与修复

以下是针对你问题的具体排查方向和解决方案：

1. 修正CORS配置（核心问题）

当前服务端使用app.use(cors())的宽松模式，但生产环境下需要更精准的配置，尤其是涉及Cookie传递时：

// 服务端修改CORS配置
const corsOptions = {
  origin: process.env.CLIENT_URL, // 生产环境设置为你的前端域名，如https://your-app.com
  credentials: true, // 开启Cookie跨域传递（如果你的业务依赖Cookie）
};
app.use(cors(corsOptions));

同时前端axios请求需要开启withCredentials：

// 所有axios请求函数添加withCredentials配置
export const getDataAPI = async (url, token) => {
  const res = await axios.get(`/api/${url}`, {
    headers: { Authorization: token },
    withCredentials: true,
  });
  return res;
};
// post/put/patch/delete请求同理添加该配置

2. 取消生产环境的代理依赖

开发环境的setupProxy.js仅在react-scripts start时生效，build后的前端静态文件不会使用代理：

生产环境下删除或注释setupProxy.js中的代理配置
保持前端axios请求使用相对路径（你当前的/api/${url}写法是正确的，无需添加完整域名）
创建.env.production文件，无需设置REACT_APP_API_URL（或设为空字符串）：

REACT_APP_API_URL=

3. 确认后端路由与反向代理配置

你的后端代码中/api路由注册在静态文件和*路由之前，这是正确的。如果使用Nginx等反向代理，需添加/api转发规则：

server {
  listen 80;
  server_name your-app.com;

  # 处理前端静态文件
  location / {
    root /path/to/client/build;
    try_files $uri $uri/ /index.html;
  }

  # 转发/api请求到后端服务
  location /api {
    proxy_pass http://localhost:5000; # 后端服务的地址和端口
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

4. 检查环境变量与服务状态

确保生产环境后端的NODE_ENV已设置为production，否则不会加载静态文件路由
查看后端日志确认服务正常启动（如Server is running on port XXXX）
用curl或Postman直接请求后端/api端点（如https://your-app.com/api/auth），验证后端服务是否响应

5. 浏览器控制台快速定位错误

打开生产环境的浏览器控制台，查看网络请求的错误类型：

出现CORS错误：按照步骤1修正CORS配置
请求返回404：检查后端路由是否正确，或反向代理是否正确转发/api请求
请求返回index.html：说明/api请求被app.get("*", ...)捕获，检查路由注册顺序或反向代理规则

内容的提问来源于stack exchange，提问作者Quang Phú Nguyễn Hoàng