即使在传递 withCredentials 时也无法在 Angular 中设置 Header Cookie：true

Question

问题

我正在尝试设置一个名为 Cookie 的标头。我使用拦截器执行此操作，以便在每次请求时完成。

代码

@Injectable
export class HeaderInterceptor implements HttpInterceptor {
  constructor(private: authService: AuthenticationService) {}

  intercept(reg: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return from(this.authService.getAuthentication()).pipe(
    switchMap((token) => {
      const headers = req.headers
        .set(TOKEN, "someToken")
        .set("Cookie", "someCookie")
        .append("Content-Type", "application/json")
        .append("Accept", "application/json");

      const requestClone = req.clone({ headers, withCredentials: true });
      return next.handle(requestClone);
      })
    );
  }
}

会发生什么

我总是得到：

尝试设置禁止的标头被拒绝：Cookie

那么我可以在这里做什么？我还尝试在每个请求上直接设置withCredentials: true，但这也不起作用。有没有其他办法？

Answer 1

出于安全考虑并确保用户代理保持对它们的完全控制，禁止以编程方式使用某些标头。

Cookie 是 Forbidden header name 列表中的禁止标头之一，因此您不能直接在代码中将其设置在 HTTP 请求标头中。

来自docs：

禁止的标头名称是任何不能以编程方式修改的 HTTP 标头的名称；具体来说，一个 HTTP 请求标头名称

规格： https://fetch.spec.whatwg.org/#forbidden-header-name

您可以随时通过document.cookie 设置cookies，浏览器会自动发送符合条件的cookies。尝试将 cookie 设置为外部域将被忽略。

Angular 提供了一个DOCUMENT DI 令牌，可用于在服务中注入文档。你可以阅读更多关于它的信息how-to-inject-document-in-service。