MERN应用前后端分离部署后前端请求后端返回404求助

一、前端请求路径校验 #

• 确认前端API请求的完整URL正确性：检查前端代码中请求的baseURL是否直接指向后端完整地址（如https://bookingappapi-5wfa.onrender.com/），若使用相对路径，Render静态站点会将请求转发到前端域名下，直接导致404。
• 示例（Axios配置）：

  const axiosInstance = axios.create({
    baseURL: "https://bookingappapi-5wfa.onrender.com/api" // 匹配后端实际API前缀
  });
  

二、后端CORS配置修正 #

• 确保后端精确配置CORS允许前端域名跨域：

  // Express 示例
  const cors = require('cors');
  app.use(cors({
    origin: "https://bookingappclient.onrender.com", // 不要用通配符，避免与认证配置冲突
    credentials: true // 仅当需要携带Cookie/认证信息时开启
  }));
  

• 禁止同时使用origin: "*"和credentials: true，浏览器会直接拦截此类请求。

三、前端站点重写规则调整 #

重定向过多多因规则冲突，单页应用正确的重写规则应仅处理路由 fallback，不干扰API请求：

• 进入Render前端站点「Settings -> Redirects/Rewrites」，添加规则：
  • 规则类型选Rewrite，源路径填/*，目标路径填/index.html，条件选「Path does not match /api/**」（根据后端API前缀调整，确保API请求不被转发到前端index.html）

四、后端路由与监听配置检查 #

• 确认后端路由前缀与前端请求路径完全匹配：比如后端定义app.get("/api/bookings", ...)，前端必须请求/api/bookings而非/bookings。
• 后端必须使用Render分配的端口：

  const PORT = process.env.PORT || 5000;
  app.listen(PORT, "0.0.0.0", () => {
    console.log(`Server running on port ${PORT}`);
  });
  

五、部署日志排查 #

• 查看前端站点Logs，确认请求是发往后端还是被前端站点拦截。
• 查看后端站点Logs，确认是否接收到前端请求（无日志则说明请求未到达后端，问题出在前端路径或CORS）

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