MERN项目生产环境页面刷新404及Cookie丢失问题求助

问题1：刷新前端路由（如/login、/profile）出现"Not Found" #

原因 #

前后端分域部署时，前端作为独立SPA部署在专属域名（如https://real-estate-nms7.onrender.com）。刷新前端路由时，浏览器直接向前端静态服务器请求该路径，但静态服务器默认只识别存在的静态文件，未配置SPA fallback规则，无法解析React的客户端路由，因此返回404。

另外，后端代码中保留了同域部署时的前端静态文件托管逻辑（express.static和*路由返回index.html），分域部署下这段代码完全多余，反而容易造成逻辑混淆。

修复方案 #

1. 配置前端服务器的SPA fallback规则

以Render平台为例，在前端项目根目录创建render.yaml：

services:
  - type: web
    name: real-estate-frontend
    env: static
    buildCommand: npm run build
    staticPublishPath: dist
    routes:
      - type: rewrite
        source: /*
        destination: /index.html

如果用Nginx部署前端，修改配置文件：

location / {
  try_files $uri $uri/ /index.html;
}

2. 删除后端的前端静态文件托管代码

移除index.js中以下代码：

// app.use(express.static(path.join(__dirname, "client/dist")));
// app.get("*", (req, res) => {
//   res.sendFile(path.join(__dirname, "client", "dist", "index.html"));
// });

问题2：刷新页面后Cookie消失，返回首页恢复正常 #

原因 #

1. Cookie Domain未配置：设置Cookie时未指定domain属性，Cookie默认绑定在后端域名下。刷新前端页面时，浏览器加载前端域名的页面，不会自动携带后端域名的Cookie；只有前端向后端发起API请求时（如首页加载时获取用户信息），才会携带Cookie，因此出现“返回首页恢复”的假象。
2. 前端请求未携带Credentials：如果前端API请求未开启withCredentials，浏览器会禁止跨域发送Cookie，导致后端无法识别用户身份。

修复方案 #

1. 完善Cookie的Domain配置

修改后端auth路由中所有设置Cookie的代码，添加domain属性（替换为你的后端实际域名）：

res
  .cookie("access_token_voiollamikatahansa", token, {
    httpOnly: true,
    secure: true,
    sameSite: "None",
    path: "/",
    domain: "your-backend-domain.onrender.com", // 替换为后端域名
  })
  .status(200)
  .json(rest);

本地开发时可注释domain属性，避免HTTP环境下Cookie失效。

2. 全局开启前端请求的Credentials

以axios为例，在前端全局配置：

import axios from 'axios';

axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'https://your-backend-domain.onrender.com/server'; // 替换为后端API根路径

3. 验证Secure属性

生产环境（HTTPS）下secure: true是正确配置；本地HTTP环境需注释该属性，否则Cookie无法被设置。

额外验证项 #

1. 扩展后端CORS的methods范围，避免OPTIONS请求被拦截：

app.use(
  cors({
    origin: ["https://real-estate-nms7.onrender.com"],
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], // 扩展methods
    credentials: true,
  })
);

2. 清除浏览器旧Cookie后再测试，避免缓存干扰。

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