跨域场景下浏览器未设置登录Cookie问题求助

问题根源 #

客户端（3000端口）与服务端（5000端口）跨域时，浏览器的同源策略和Cookie安全机制会阻止Cookie写入；而Thunder Client这类API测试工具不受浏览器同源策略约束，因此能正常接收Cookie。

分步修复方案 #

1. 修正服务端Cookie配置 #

当前Cookie配置存在关键疏漏，调整如下：

res.cookie("authToken", authToken, {
    path: '/', // 确保Cookie在服务端所有路径下有效
    httpOnly: true, // 保留该配置，防范XSS攻击
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax', // 生产环境用None，本地开发用Lax
    secure: process.env.NODE_ENV === 'production', // 生产环境HTTPS下开启secure，本地HTTP环境关闭
    maxAge: 1000 * 60 * 60 * 12
})
.json({success:true});

• sameSite: 'none'：跨域场景下必须设置该值，允许浏览器跨域携带Cookie，但需配合secure: true（仅HTTPS环境生效）
• secure: false：本地开发使用HTTP协议时，必须关闭此选项，否则浏览器会拒绝写入Cookie
• path: '/'：确保Cookie能被服务端所有路径识别

2. 配置服务端CORS规则 #

跨域请求时，服务端必须开启凭证携带许可，以Express框架为例：

const cors = require('cors');

app.use(cors({
    origin: 'http://localhost:3000', // 明确指定客户端地址，禁止使用通配符*
    credentials: true // 允许请求携带Cookie等凭证
}));

• 必须指定具体的origin，使用通配符*会导致浏览器拒绝处理跨域凭证
• credentials: true是跨域场景下传递Cookie的必要配置

3. 客户端请求开启凭证携带 #

根据使用的请求库，开启凭证携带选项：

• Axios：

  axios.post('http://localhost:5000/login', loginData, {
      withCredentials: true
  });
  

• Fetch API：

  fetch('http://localhost:5000/login', {
      method: 'POST',
      credentials: 'include', // 携带Cookie
      body: JSON.stringify(loginData),
      headers: {
          'Content-Type': 'application/json'
      }
  });
  

代理方案（可选） #

如果不想处理跨域Cookie配置，可在客户端项目中配置代理，让请求转发到服务端。以React项目为例，在package.json中添加：

"proxy": "http://localhost:5000"

之后客户端请求直接写/login即可，此时请求属于同源，无需额外跨域配置。

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