跨域场景下Cookie未设置及请求未携带问题求助

针对你遇到的Cookie无法在浏览器保存且未随请求发送的问题，从以下关键方向排查修复：

1. 修正Cookie的secure属性（核心问题） #

你当前设置了secure: true，但localhost是HTTP环境，secure属性仅在HTTPS连接下才会让浏览器保存Cookie。开发环境下必须将其改为false，或根据环境动态判断：

const options = {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production', // 仅生产环境启用secure
  sameSite: process.env.NODE_ENV === 'production' ? "None" : "Lax", // 开发环境用Lax
  path: "/", // 确保Cookie在所有路径下可用
};

2. 确保登录请求携带withCredentials #

登录接口是获取Cookie的关键请求，必须在登录请求中添加withCredentials: true，否则浏览器会拒绝接收响应头中的Set-Cookie：

// 示例登录请求配置
const login = async (credentials) => {
  await axios.post("/api/v1/auth/login", credentials, {
    withCredentials: true,
  });
};

3. 检查Cookie的domain与path设置 #

• domain：若后端指定domain: "localhost:5000"，浏览器会认为Cookie仅属于5000端口，不会在3000端口请求中携带。开发环境可省略domain，让浏览器自动匹配当前域名（localhost）；
• path：确保path设为"/"，否则仅指定路径下的请求才会携带Cookie。

4. 验证后端Set-Cookie响应头 #

在浏览器开发者工具的Network面板中，查看登录请求的响应头，确认Set-Cookie字段存在且格式正确：

生产环境示例：accessToken=xxx; HttpOnly; Path=/; Secure; SameSite=None
开发环境示例：accessToken=xxx; HttpOnly; Path=/; SameSite=Lax

5. 全局配置Axios的withCredentials #

避免单个请求遗漏配置，可全局开启Axios的withCredentials：

import axios from "axios";

axios.defaults.withCredentials = true;

额外排查点 #

• 确认浏览器隐私设置中已开启"允许所有Cookie"，部分浏览器需手动开启第三方Cookie权限；
• 检查Next.js代理是否生效：Network面板中请求URL应为localhost:3000/api/xxx而非直接请求localhost:5000；
• 清除浏览器缓存与现有Cookie，旧Cookie可能干扰新Cookie的设置。

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