Question

实际上，我们的后端使用请求标头中的Cookie对请求进行身份验证。我知道如果我设置标题“Cookie”，它将拒绝。那么，有没有办法将Cookie发送到后端？

Answer 1

我想有一个阶段，您要求服务器对您进行身份验证。在此之后（如果验证成功），服务器将在响应中返回cookie。浏览器将存储此cookie并为每次调用再次发送。

也就是说，在跨域请求（CORS）的情况下，您需要将XHR的withCredentials设置为true，以使浏览器在您的请求中添加Cookie。

要使用Angular2启用此功能，我们需要扩展BrowserXhr类，如下所述：

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr = super.build();
    xhr.withCredentials = true;
    return <any>(xhr);
  }
}

并使用扩展名覆盖BrowserXhr提供程序：

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(BrowserXhr, { useClass: CustomBrowserXhr })
]);

有关详细信息，请参阅此问题：

修改（在freaker的评论之后）

从RC2，您可以直接在请求配置中使用withCredentials属性，如下所述：

this.http.get('http://...', { withCredentials: true })

编辑（在[maxou]评论之后）

请记住在每个请求中包含withCredentials：true。

Answer 2

在Angular5中，您可以编写Http拦截器：

auth.interceptor.ts

import { Observable } from 'rxjs/Observable';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      withCredentials: true
  });
  return next.handle(request);
  }
}

并添加到app.module的提供者数组

app.module.ts

import { AuthInterceptor } from './services/auth.interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
imports: [
    BrowserModule,HttpClientModule,FormsModule
  ],

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

如何在Angular2中的所有请求的请求标头中发送“Cookie”？

2 个答案: