部署MERN应用后Cookie无法正常设置的问题求助

我把MERN应用的前端和后端都部署在Render平台后，用户登录时Cookie无法被正常设置，但本地开发环境下一切运行正常。

前端代码（React + Vite） #

async function handleLogin(e: React.FormEvent) {
  e.preventDefault();
  const response = await fetch("https://budgetfy.onrender.com/login", {
    method: "POST",
    body: JSON.stringify({
      username,
      password,
    }),
    headers: {
      "Content-Type": "application/json",
    },
    credentials: "include",
  });
  if (response.ok) {
    response.json().then((userInfo) => {
      setUserInfo(userInfo);
      setRedirect(true);
    });
  } else {
    //alert("Wrong credentials");
    setError(true);
  }
}

后端代码（Express） #

app.use(
  cors({
    credentials: true,
    origin: "https://stevens-budgetfy.onrender.com",
  })
);

//API endpoint for login users
app.post("/login", async (req: Request, res: Response) => {
  console.log(req.body);
  const { username, password } = req.body;
  const userDoc = await User.findOne({ username });
  const passOk = bcrypt.compareSync(password, userDoc?.password);

  if (passOk) {
    jwt.sign(
      { username, id: userDoc?._id },
      process.env.JWT_SECRET,
      {},
      (err: Error, token: Response) => {
        if (err) throw err;
        res.cookie("token", token).json({
          id: userDoc?._id,
          username,
        });
      }
    );
  } else {
    res.status(400).json("wrong credentials");
  }
});

我尝试过添加代理但未生效，了解到使用Vite时需在vite.config.ts而非package.json中配置代理，这是否是唯一解决方案？

解决方案分析 #

代理不是唯一解决方案，你遇到的Cookie问题核心是跨域环境下的Cookie属性配置不兼容，结合Render平台特性，可从以下几个方向修复：

1. 修正Cookie的跨域属性 #

后端设置Cookie时，必须添加以下关键属性，否则跨域场景下浏览器会拒绝存储：

• sameSite: "none"：跨域场景下必填，需配合secure: true使用
• secure: true：Render部署的服务均为HTTPS，必须开启该属性
• httpOnly: true（可选）：提升安全性，防止XSS攻击获取Cookie
• maxAge（可选）：设置Cookie有效期，避免频繁登录

修改后端Cookie设置代码：

res.cookie("token", token, {
  sameSite: "none",
  secure: true,
  httpOnly: true,
  maxAge: 24 * 60 * 60 * 1000 // 24小时有效期
}).json({
  id: userDoc?._id,
  username,
});

2. 校验CORS配置准确性 #

确保后端CORS的origin值完全匹配前端的Render域名（包含HTTPS前缀），如果前端域名变更，需同步更新该配置。

3. Vite代理仅适用于本地开发 #

Vite的代理配置只在本地开发阶段生效，部署到Render后，前端是静态资源服务，代理配置不会起作用。部署后必须直接请求后端真实API地址，你当前的前端代码已经符合要求，所以代理不是部署后的解决方案。

4. 检查Render环境变量 #

确认后端的JWT_SECRET环境变量已在Render控制台正确配置，否则JWT签名会失败，导致无法生成有效Token，间接引发Cookie设置失败。

5. 查看浏览器错误提示 #

打开浏览器开发者工具：

• 「应用」-「Cookie」面板：查看Cookie是否被标记为「被阻止」
• 「控制台」：查看跨域相关错误信息，定位具体问题

总结：优先修正Cookie的跨域属性配置，这是解决跨域Cookie存储问题的核心，代理只是本地开发的便捷方案，并非部署后的必要手段。

内容的提问来源于stack exchange，提问作者scooby.steve