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

Cannot set Header Cookie in Angular even when passing withCredentials: true

问题

我正在尝试设置一个名为 header 的 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);
      })
    );
  }
}

会发生什么

我总是得到:

Attempt to set a forbidden header was denied: Cookie

那我能在这里做什么呢?我还尝试在每个请求上直接设置 withCredentials: true,但也没有用。还有其他办法吗?

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

CookieForbidden header name 列表中禁止的 header 之一,因此您不能在 HTTP 请求中设置它 header 直接来自代码。

来自docs

A forbidden header name is the name of any HTTP header that cannot be modified programmatically; specifically, an HTTP request header name

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

您始终可以通过 document.cookie 设置 cookie,浏览器会自动发送符合条件的 cookie。尝试将 cookie 设置为外部域将被静默忽略。

Angular 得出一个 DOCUMENT DI token which can be used to inject document in a service. You can read more about it how-to-inject-document-in-service.