Axios跨域请求发送错误Cookie问题排查

结合你描述的现象和给出的配置，我帮你梳理几个核心排查点，大概率能找到问题所在：

1. 先检查Axios的baseURL配置（最可能的核心问题） #

你的Axios baseURL是用window.location.hostname拼接的，这意味着请求会发送到前端本地开发服务器，而不是部署后端的远程服务器！

如果后端在另一台机器（比如http://192.168.1.xxx:xxxx），你需要把baseURL直接指向后端地址，比如：

axios.create({
  baseURL: 'http://你的后端IP:端口/data', // 替换成实际后端地址
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'X-Csrf-Token': <token>,
    'X-Requested-With': 'XMLHttpRequest'
  },
  withCredentials: true
});

如果之前请求发去了前端本地，那携带的Cookie自然是前端服务器设置的，和你在Chrome里看到的后端Cookie完全不是一回事，这就会出现数值不一致的情况。

2. 验证后端Set-Cookie的响应头属性 #

打开Chrome开发者工具的Network标签，找到后端返回csrf_token的请求，查看Response Headers里的Set-Cookie字段，确认以下属性：

• Domain：是否匹配后端服务器的IP/域名，或者未设置（未设置则默认是当前请求的域名，跨域时也能携带）。如果Domain设成了前端本地的地址，那后端的Cookie根本不会存在于前端的Cookie存储中。
• SameSite：跨域场景下，不能设为Strict，建议设为Lax（本地http开发不能用None，因为None需要配合Secure属性，仅支持https）。如果是Strict，跨域请求会自动忽略Cookie。
• Path：要和Axios请求的路径匹配，比如请求路径是/data，那Path设为/或/data都可以，避免路径不匹配导致Cookie无法携带。

3. 确认Axios实例的正确使用 #

确保所有需要携带Cookie的请求，都是通过你创建的这个带withCredentials: true的实例发送的，而不是直接用默认的axios对象。比如：

// 先创建实例
const apiClient = axios.create({ /* 你的配置 */ });
// 用实例发请求
apiClient.post('/your-api-path', data);

如果混用了默认axios，withCredentials配置不会生效，Cookie也不会被携带。

4. 核对Chrome Cookie存储的目标域名 #

在Chrome的Application > Storage > Cookies里，确认你查看的是后端远程服务器的域名/IP下的Cookie，而不是前端本地服务器的。有时候前端本地可能也有同名的csrf_token Cookie，容易混淆。

补充：Nginx配置的小细节 #

你的Nginx CORS配置整体是对的（指定了具体Origin、开启了Credentials、加了always参数），但注意：如果后端已经在响应头里设置了Access-Control-Allow-Origin，Nginx的add_header可能会重复添加，导致浏览器报错。可以检查后端代码是否已经输出了CORS头，避免冲突。

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