Postman请求localhost登录接口可设Cookie但Vue前端调用无Set-Cookie头

问题根因分析 #

1. Postman运行逻辑说明 #

Postman桌面端是直接在本地发起网络请求，不会经过自有服务器转发，你的猜测不成立，这不是问题的诱因。

2. Vue端无法获取Set-Cookie的常见原因 #

• 跨域凭证配置缺失
  若前端域名与后端接口域名不一致属于跨域请求，浏览器默认会拦截跨域响应的Set-Cookie头，也不会自动携带跨域Cookie，需要两端同时配置：
  • 后端配置Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能设为通配符*，必须填写前端的实际域名
  • 你的axios配置未开启凭证携带，需要在全局axios配置中添加axios.defaults.withCredentials = true，或者在单次请求的配置项中开启该参数
• Cookie属性拦截
  若后端返回的Set-Cookie携带Secure属性，使用HTTP协议访问的前端会被浏览器直接拒收Cookie；跨域场景下若Cookie的SameSite属性设为Strict或Lax也会被拦截，跨域使用Cookie需要将SameSite设为None同时搭配Secure属性。
• 后端逻辑差异化处理
  部分后端会根据请求头的Origin、User-Agent等字段判断请求来源，对Postman和前端请求返回不同的响应内容，你可以抓包对比两类请求的请求头差异，确认后端是否在前端请求场景下没有返回Set-Cookie头。

3. API Key使用说明 #

如果后端设计是使用API Key做身份校验，不需要额外获取session ID，后续请求直接将API Key放到请求头中传递即可完成身份认证。

修复代码示例 #

// 建议在你单独配置的axios全局配置文件中添加这一行
axios.defaults.withCredentials = true

async handleSubmit(){
  const response = await axios.post('/login', {
    email: this.email,
    password:this.password
  });
  console.log(response)
}

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