本地开发环境下HttpOnly Cookie未被浏览器存储的问题排查

问题根源 #

结合你的配置和开发环境，浏览器不存储Cookie的核心原因有三点：

• Axios未开启跨域凭证支持：跨域请求要接收并存储Set-Cookie，必须显式声明允许携带凭证，否则浏览器会直接忽略Cookie设置。
• 前端错误设置响应头：Access-Control-Allow-Origin是后端返回的响应头，前端请求时添加这个头完全无效，还可能和后端返回的合法头冲突。
• Secure属性与HTTP前端不兼容：你的前端运行在http://localhost:3000（HTTP协议），但Cookie标记了Secure——这个属性要求只有HTTPS页面才能存储该Cookie，HTTP环境下浏览器会直接拒绝。

具体解决步骤 #

1. 修正Axios请求配置

修改Axios实例，添加withCredentials: true，并移除错误的Access-Control-Allow-Origin头：

static readonly apiNoAuthInstance = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,      // https://localhost:5001/v1/api/
  headers: {
    'Content-Type': 'application/json; charset=UTF-8'
    // 删除 'Access-Control-Allow-Origin': '*' 这一行
  },
  withCredentials: true // 关键配置：允许跨域携带凭证
});

2. 调整后端Cookie的Secure属性（仅开发环境）

开发环境下临时关闭Secure，生产环境保持开启：

HttpContext.Response.Cookies.Append("token", result.AccessToken,
    new CookieOptions
    {
        Expires = result.ValidTo,
        HttpOnly = true,
        Secure = !builder.Environment.IsDevelopment(), // 开发环境设为false
        IsEssential = true,
        SameSite = SameSiteMode.None
    });

3. 可选：前端切换为HTTPS（贴近生产环境）

如果想在开发环境模拟生产的HTTPS配置，可给前端开启HTTPS：

• Next.js：启动时执行next dev --experimental-https，或在next.config.js中配置https: true。
• React（Create React App）：执行HTTPS=true npm start，前端会运行在https://localhost:3000，此时后端的SecureCookie属性可正常生效。

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