部署在Render的React+Node.js应用登录后Cookie未存储致401错误

问题核心 #

部署到Render后，前端登录/注册请求返回成功，但浏览器未写入会话Cookie，导致后续调用笔记API时返回401未认证错误。本地前端连接部署后端正常，说明问题出在跨域请求的Cookie传递配置上。

修复步骤 #

1. 前端fetch请求必须显式携带credentials

跨域场景下，fetch默认不会自动携带Cookie，需要在请求配置中添加credentials: 'include'，确保Cookie能在前后端之间传递。修改network/fetchData.ts：

import { ConflictError, UnauthorizedError } from "../errors/http_errors";

export const fetchData = async (input: RequestInfo, init?: RequestInit) => {
  const apiEndpoint = env.BACKEND_URL + input;
  // 合并请求配置，强制携带credentials
  const fetchOptions = {
    credentials: 'include',
    ...init
  };

  const response = await fetch(apiEndpoint, fetchOptions);
  if (response.ok) {
    return response;
  } else {
    const errorBody = await response.json();
    const { error: errorMessage } = errorBody;

    if (response.status === 401) {
      throw new UnauthorizedError(errorMessage);
    } else if (response.status === 409) {
      throw new ConflictError(errorMessage);
    } else {
      throw Error(
        "Request failed with status : " +
          response.status +
          " message: " +
          errorMessage
      );
    }
  }
};

修改后，登录、获取笔记等所有请求都会自动携带Cookie，无需单独修改每个API调用函数。

2. 后端CORS配置不能使用通配符*

当credentials: true时，CORS的origin不能设置为*，必须指定具体的前端域名，否则浏览器会拒绝接收后端设置的Cookie。修改app.ts中的CORS配置：

app.use(cors({ 
  origin: "https://notes-app-xjr0.onrender.com", // 你的前端Render部署地址
  credentials: true 
}));

建议通过环境变量管理前端域名，方便开发/生产环境切换：

// 确保.env文件中配置了FRONTEND_URL
app.use(cors({ 
  origin: env.FRONTEND_URL,
  credentials: true 
}));

3. 优化Session Cookie的安全配置

当前的session cookie配置基本正确，可做一个小优化提升安全性：

• 将httpOnly: false改为httpOnly: true，防止前端JS通过document.cookie访问Cookie，降低XSS攻击风险，不影响会话的正常传递。

cookie: {
  secure: true,
  httpOnly: true, // 修改为true
  sameSite: "none",
  maxAge: 60 * 60 * 1000,
},

4. 确认Session存储正常

检查MongoStore是否正确连接到MongoDB：

• 查看后端日志，确认MongoDB连接成功
• 登录后在后端打印req.session，确认userId已被正确设置
• 查看MongoDB中的sessions集合，确认登录后有新的会话文档生成

总结 #

以上几点是跨域会话认证的核心配置，修改后前端请求会正确携带Cookie，后端能识别用户会话，即可解决401未认证问题。

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