本地Node服务向EJS客户端发Cookie后，Axios后续请求未携带Cookie

以下是针对该场景的具体排查步骤和解决方案：

1. 确保CORS配置的origin精确匹配且禁用通配符 #

带credentials的CORS请求不能使用*作为origin，必须指定前端的精确地址（包含协议、域名、端口）。后端配置示例：

const cors = require('cors');
const corsOptions = {
  origin: 'http://localhost:3000', // 必须和前端地址完全一致
  credentials: true,
  allowedHeaders: ['Content-Type'],
  methods: ['GET', 'POST', 'OPTIONS']
};
app.use(cors(corsOptions));

如果前端有多个测试环境，可用数组指定允许的origin，比如origin: ['http://localhost:3000', 'http://127.0.0.1:3000']。

2. 修正Cookie的参数配置 #

后端设置Cookie时，需确保参数符合跨域要求：

res.cookie('token', yourAuthToken, {
  httpOnly: true, // 关键：防止XSS攻击，同时确保Cookie由浏览器自动携带
  secure: process.env.NODE_ENV === 'production', // 本地开发设为false，生产环境必须为true（配合HTTPS）
  sameSite: 'lax', // 本地跨域推荐用lax；若必须用none，需同时设置secure: true
  domain: 'localhost', // 本地环境直接设为localhost，不要加前缀点（.localhost）
  path: '/', // 确保所有后端路径都能访问该Cookie
  maxAge: 86400000 // 按需设置有效期，单位毫秒
});

注意：如果用sameSite: 'none'，浏览器会强制要求secure: true，本地开发需配置HTTPS（如mkcert）才能生效。

3. 确认Axios的withCredentials配置全局生效 #

确保withCredentials配置覆盖所有请求：

• 全局配置（推荐）：

import axios from 'axios';
axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'http://localhost:4000';

• 若使用Axios实例：

const apiClient = axios.create({
  baseURL: 'http://localhost:4000',
  withCredentials: true
});

排查点：页面跳转后，Axios实例是否被重新初始化？如果是在组件内临时创建实例，需确保每个实例都开启withCredentials。

4. 检查浏览器Cookie存储与请求头 #

打开浏览器开发者工具（F12）：

1. 进入Application > Cookies > http://localhost，确认tokenCookie已存在：
   • 若不存在：检查后端响应头的Set-Cookie字段是否符合规范，是否被浏览器拦截（比如sameSite和secure不匹配）。
   • 若存在：切换到Network标签，查看后续请求的Request Headers是否包含Cookie: token=xxx。如果没有，检查请求的URL是否与Cookie的domain、path匹配。

5. 关闭浏览器第三方Cookie拦截 #

部分浏览器（如Chrome）默认拦截第三方Cookie，可临时关闭隐私模式，或在设置中允许所有Cookie：

• Chrome路径：设置 → 隐私和安全 → Cookie及其他网站数据 → 选择“允许所有Cookie”
  测试是否能正常携带Cookie，排除浏览器策略干扰。

6. 验证OPTIONS预检请求响应 #

跨域POST/PUT等请求会先发送OPTIONS预检请求，确保后端正确响应：

• 在开发者工具Network标签中查看OPTIONS请求的响应状态码应为200。
• 若响应异常，检查是否有自定义路由拦截了OPTIONS请求，或CORS配置未包含OPTIONS方法。

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