Vercel前端向Render后端发Cookie失败致401未授权问题

背景 #

我是一名自学Web开发者，近期将基于Node.js、Express、MongoDB、WebSocket技术栈的后端部署在Render免费层，前端部署在Vercel，认证采用Passport.js（Google OAuth）方案。

问题现象 #

• 本地环境下所有功能正常；
• 部署后认证仅部分生效：Google登录流程完成，浏览器已成功设置包含access/refresh token的Cookie；
• 请求后端受保护路由时，后端未收到Cookie/token，触发401 Unauthorized错误，用户被重定向至登录页。

预期行为 #

• 前端发起请求时自动携带Cookie（包含access/refresh token）至后端；
• 后端验证token通过后，允许用户访问受保护路由。

已尝试操作 #

1. 检查并配置后端（Render）CORS：

const options = {
httpOnly: true,
secure: isProduction,  // 生产环境启用Secure属性
sameSite: "none",  // 跨域场景下必填配置
maxAge: 7 * 24 * 60 * 60 * 1000, // Cookie有效期7天
};

app.use(
cors({
  origin: "https://sync-sphere-eight.vercel.app",  // 前端部署地址
  credentials: true, // 允许携带凭证（Cookie）
  methods: ["GET", "PUT", "POST", "DELETE", "OPTIONS"],
  allowedHeaders: [
    "Access-Control-Allow-Origin",
    "Content-Type",
    "Authorization",
    "Origin",
    "X-Requested-With",
    "Accept",
  ],
  exposedHeaders: ["Access-Control-Allow-Credentials"],
})
);

app.options("*", cors());

2. 配置前端（Vercel）Axios实例：

export const api = axios.create({
 baseURL: API_URL,
 withCredentials: true,  // 确保请求携带Cookie
});

3. 浏览器开发者工具排查：登录后Cookie存在于浏览器中，但未随API请求一同发送；
4. Postman手动测试：直接请求后端受保护路由可正常接收并验证Cookie，请求成功；
5. 疑问点：Render免费层是否会拦截跨域Cookie？Vercel是否未正确转发凭证？当前CORS配置是否存在错误？

核心诉求 #

如何确保Vercel部署的前端向Render后端发起请求时，能正确发送包含token的Cookie？

注：Render免费层后端处于闲置状态时，启动需约50秒
补充：该问题仅在Brave浏览器中出现，Microsoft Edge中功能正常

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