web-dev-qa-db-ja.com

Angular 4-すべてのリクエストでwithCredentialsを設定する-cors cookie

angularクライアントはバックエンドから分離されており、バックエンドでcorsを有効にしました。Cookieがリクエストに追加されないために認証が失敗するという事実を除いて、すべて正常に動作します。

オンラインで検索した後、すべてのhttp要求で{withCredentials : true}を設定する必要があることがわかりました。私はなんとか1つのリクエストでそれを行うことができましたが、すべてのリクエストで機能するわけではありません。

BrowserXhrを使用してみました Angular2のすべてのリクエストのリクエストヘッダーで「Cookie」を送信する方法？ しかし、それは機能せず、非推奨です。

RequestOptionsも試しましたが、うまくいきませんでした。

すべての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);
  }
}
angularhttpcookiesoauth-2.0cors
29
exilonX

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 {}

ソースと完全な説明

36
Venomy

もう1つのおそらく簡単な方法は、独自のApiServiceを作成することです。挿入されたHttpClientを使用します。すべてのXHR要求は、HttpClientの代わりにApiServiceを直接使用します。

以下に実装例を示します。

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));
  }
2
Jess