Angular 18中如何携带HttpOnly Cookie的JWT发起授权请求？

首先明确一个核心限制：HttpOnly类型的Cookie是浏览器禁止前端JavaScript读取或修改的，这是浏览器的安全设计，目的是防范XSS攻击窃取token。所以你想手动把这个Cookie里的JWT放到Authorization头里，从技术上是做不到的——这不是Angular的问题，是浏览器的安全机制。

正确的处理思路应该是利用浏览器自动携带Cookie的特性，结合Angular的请求配置来实现授权：

• 第一步：确保服务器端Cookie配置正确
  服务器返回的Set-Cookie头需要包含必要的属性，让浏览器知道在哪些请求中自动携带这个Cookie：

  Set-Cookie: access-token=你的JWT内容; HttpOnly; Secure; SameSite=Strict; Domain=你的域名.com; Path=/
  

  • Secure：确保Cookie仅在HTTPS请求中携带（生产环境必须开启）
  • SameSite=Strict：防止CSRF攻击，仅在同域请求中携带
  • Domain和Path：限定Cookie的生效范围，确保后续接口请求都符合这个范围

• 第二步：Angular请求开启凭证携带
  使用Angular的HttpClient时，需要在请求中配置withCredentials: true，这样浏览器才会在请求中自动带上符合条件的Cookie：
  单个请求示例：

  import { HttpClient } from '@angular/common/http';
  
  constructor(private http: HttpClient) {}
  
  getProtectedData() {
    return this.http.get('/api/protected-resource', { withCredentials: true });
  }
  

  全局配置（通过拦截器统一处理所有请求）：

  import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  
  @Injectable()
  export class CredentialsInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler) {
      // 克隆请求并开启凭证携带
      const authRequest = req.clone({ withCredentials: true });
      return next.handle(authRequest);
    }
  }
  

  然后在AppModule的providers中注册拦截器：

  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CredentialsInterceptor, multi: true }
  ]
  

• 第三步：服务器端调整验证逻辑
  既然前端是通过Cookie传递JWT，服务器需要修改验证逻辑——从请求的Cookie中读取access-token，而不是从Authorization头中解析。

如果你的业务场景确实需要把JWT放到Authorization头中，那服务器不应该将token设置为HttpOnly Cookie，而是直接在响应体中返回token，前端将其存储到localStorage或sessionStorage，再通过Angular拦截器统一添加到Authorization头。但这种方式存在XSS攻击风险，需要根据业务安全需求权衡选择。

内容的提问来源于stack exchange，提问作者Никита Загороднев