Node+React环境下浏览器无法设置Cookie的问题求助

问题排查与修复步骤 #

1. 统一前后端源地址，利用Vite代理避免跨域冲突 #

后端CORS配置的origin是http://1227.0.0.1:5173，但前端Axios直接请求http://localhost:5000，加上Vite已经配置了代理，应该改用相对路径走代理：

• 前端修改Axios请求路径：

const loginUser = useMutation({
  mutationFn: (user: FormData) => {
    return axios.post("/login", user, {
      withCredentials: true,
    });
  },
});

• 确保Vite代理配置（vite.config.js/ts）正确：

export default defineConfig({
  server: {
    proxy: {
      '/login': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

• 后端CORS同时支持本地两个常用地址，避免IP/域名差异：

app.use(
  cors({
    origin: ["http://127.0.0.1:5173", "http://localhost:5173"],
    methods: ["POST", "GET"],
    credentials: true,
  })
);

2. 修正Cookie的SameSite与Secure配置 #

Chrome 80+对SameSite=None有严格要求：必须搭配Secure=true（仅HTTPS环境有效）。本地开发用HTTP的话，别用SameSite=None，改成Lax或Strict：

res.cookie("token", accessToken, {
  httpOnly: true,
  secure: process.env.NODE_ENV === "production", // 生产环境开HTTPS才启用
  sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
  maxAge: 3600000,
});

3. 正确查看Chrome中的Cookie #

别找错地方：

• 打开Chrome DevTools → 切换到Application标签
• 左侧菜单选Cookies → 点击前端域名（比如http://localhost:5173），不是后端的localhost:5000
• HttpOnly标记的Cookie在这里能看到，只是不能通过JS读取

4. 清理旧Cookie后重新测试 #

旧Cookie可能干扰结果：

• 在DevTools的Application→Cookies里删除所有相关Cookie
• 重启前后端服务，重新发起登录请求

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