Angular 4 - 在每个请求上设置凭据 - cors cookie

Question

我的角度客户端与后端分离，我在后端启用了cors，除了我的身份验证失败，因为cookie未添加到请求中之外，一切正常。

在线搜索后，我发现我应该为每个http请求设置{withCredentials : true}。我设法在单个请求上执行此操作，并且它有效，但不是在所有请求上都有效。

我尝试使用BrowserXhr 如何在请求标头中为Angular2中的所有请求发送"Cookie"？ 但它不起作用，它也被弃用了 AFAIK。

我也尝试了请求选项，但它不起作用。

我可以做些什么来设置每个 http 请求的{withCredentials: true}？

后期编辑：

@Injectable()
export class ConfigInterceptor implements HttpInterceptor {
  constructor(private csrfService: CSRFService) {
  }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let token = this.csrfService.getCSRF() as string;
    const credentialsReq = req.clone({withCredentials : true, setHeaders: { "X-XSRF-TOKEN": token } });
    return next.handle(credentialsReq);
  }
}

Answer 1

您可以使用HttpInterceptor 。

@Injectable()
export class CustomInterceptor implements HttpInterceptor {
    constructor() {
    }
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        request = request.clone({
            withCredentials: true
        });
        return next.handle(request);
    }
}

接下来，您必须提供它：

@NgModule({
  bootstrap: [AppComponent],
  imports: [...],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CustomInterceptor ,
      multi: true
    }
  ]
})
export class AppModule {}

来源和完整解释

Answer 2

另一种更简单的方法是创建自己的 ApiService。 它将使用注入的HttpClient. 所有 XHR 请求都将直接使用 ApiService 而不是 HttpClient。

下面是一个实现示例：

https://github.com/gothinkster/angular-realworld-example-app/blob/63f5cd879b5e1519abfb8307727c37ff7b890d92/src/app/core/services/api.service.ts

我修改的一些代码：

@Injectable()
export class ApiService {
  private httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
    withCredentials: true // to allow cookies to go from "https://localhost:4567" to "http://localhost:5678"
  };
  constructor(
    private http: HttpClient
  ) { }
  private formatErrors(error: any) {
    return throwError(error.error);
  }
  get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`${environment.api_url}${path}`, { params })
      .pipe(catchError(this.formatErrors));
  }
  put(path: string, body: Object = {}): Observable<any> {
    return this.http.put(
      `${environment.api_url}${path}`,
      JSON.stringify(body),
      this.httpOptions
    ).pipe(catchError(this.formatErrors));
  }
  post(path: string, body: Object = {}): Observable<any> {
    return this.http.post(
      `${environment.api_url}${path}`,
      JSON.stringify(body),
      this.httpOptions
    ).pipe(catchError(this.formatErrors));
  }