Angular 17如何从服务器响应同时获取HTTP头与字符串Token

核心问题原因 #

服务器返回的是纯字符串格式的Token，但你的Angular代码默认按JSON格式解析响应，导致触发JSON解析错误。

具体解决步骤 #

1. 修改请求配置，指定响应类型为文本 #

在登录请求的配置中添加responseType: 'text'，告诉Angular不要自动尝试解析JSON：

// 示例登录请求代码
this.http.post('/api/login', loginFormData, {
  responseType: 'text', // 关键配置，适配字符串响应
  withCredentials: true // 开启该配置才能让浏览器保存服务器返回的Cookie
}).subscribe({
  next: (token) => {
    // 此时token就是服务器返回的字符串Token，可直接使用
    console.log('获取到Token:', token);
  },
  error: (err) => {
    console.error('请求异常:', err);
  }
});

2. 确保Cookie正常保存 #

• 服务器端需正确配置Cookie的SameSite属性（开发环境可设为Lax，跨域场景设为None时需配合Secure属性）
• 必须在请求中携带withCredentials: true，否则浏览器会忽略服务器返回的Set-Cookie头

3. 验证结果 #

请求成功后：

• 字符串Token可直接在next回调中获取使用
• 打开浏览器开发者工具的Application面板，在Cookies栏目下能看到服务器生成的Cookie

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