为何浏览器在Axios/fetch请求中忽略Set-Cookie，直接返回HTML时却接受？

一、浏览器拒绝保存Cookie的通用情况 #

• Domain属性不合规：设置的域名不是当前请求域名的父域，或跨顶级域（如从example.com设置Domain为test.com）
• Path属性不匹配：Cookie的Path路径与当前请求的路径无包含关系（如请求/api/login，Cookie Path设为/admin）
• SameSite与请求上下文冲突：跨站POST请求时SameSite设为Strict，会被浏览器阻止（你这里工具未提示，暂可排除）
• HTTP环境下使用Secure属性：非HTTPS网站的Cookie带Secure标记，浏览器会拒绝保存
• 过期时间无效：expires设为过去的时间，或Max-Age设为负数
• Cookie体积超限：单Cookie大小超过4KB左右的浏览器限制
• 隐私设置拦截：浏览器开启“阻止第三方Cookie”或处于隐身模式（你多浏览器表现一致，大概率不是）
• 跨域请求未正确配置CORS：这是你当前遇到的核心问题

二、针对你的跨域场景的解决方案 #

你的架构是前端localhost:3000、后端localhost:8000，直接访问后端HTML（document请求）能存Cookie，但Axios/fetch的xhr请求不行，本质是跨域AJAX请求需要满足后端CORS配置+前端请求携带凭证两个条件，浏览器才会保存Cookie：

1. 后端必须配置以下CORS响应头 #

• Access-Control-Allow-Origin：必须指定具体的前端域名（如http://localhost:3000），不能用通配符*（通配符不允许携带凭证）
• Access-Control-Allow-Credentials: true：明确允许跨域请求携带凭证（包括Cookie）

以Node.js/Express为例，配置示例：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

2. 前端请求必须开启凭证携带 #

• Axios：添加withCredentials: true配置

axios.get('http://localhost:8000/api/your-endpoint', {
  withCredentials: true
});

• fetch：设置credentials: 'include'

fetch('http://localhost:8000/api/your-endpoint', {
  credentials: 'include'
});

为什么直接访问后端HTML可以？因为此时浏览器地址栏是后端域名localhost:8000，属于同域请求，无需CORS配置，浏览器会正常处理Set-Cookie；而前端通过AJAX请求后端是跨域操作，必须满足上述两个条件才能让浏览器保存Cookie。

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