Angular 5中通过HTTPInterceptor设置Cookie头遇问题求助

看起来你在配置Token拦截器的时候踩了两个常见的坑，我来帮你理清问题并给出修正方案：

问题根源分析 #

• 手动设置Cookie头不符合浏览器安全规范：浏览器会自动管理同源请求的Cookie，你不能通过setHeaders手动注入Cookie——这种操作会被浏览器的安全机制阻止，直接导致异常。浏览器会自动把当前域名下有效的Cookie添加到请求头里，不需要你手动拼接。
• withCredentials不是HTTP请求头：它是请求的配置属性，用来告诉浏览器在跨域请求时携带凭证（包括Cookie、HTTP认证信息等）。把它放在setHeaders里完全是错误的用法，这也是导致异常的原因之一。

修正后的拦截器代码 #

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(private cookieService: CookieService ) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 正确配置withCredentials属性，让浏览器自动处理Cookie
    const modifiedRequest = request.clone({
      withCredentials: true
    });

    return next.handle(modifiedRequest);
  }
}

额外注意事项 #

1. 同源场景：如果你的请求和当前页面是同源的，只要Cookie的domain、path等属性配置正确，浏览器会自动把session Cookie添加到请求头，不需要额外操作。
2. 跨域场景：除了在拦截器里设置withCredentials: true，后端服务器还必须配置对应的CORS响应头：
   • Access-Control-Allow-Credentials: true
   • Access-Control-Allow-Origin必须设置为具体的前端域名（不能用*）

这样调整之后，你的拦截器就能正常工作，请求也会正确携带Cookie了。

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