Angulaire 4 - réglage de withCredentials à chaque requête - scro cookie

Mon angulaire client est séparé de l'arrière-plan et je l'ai activé la scro sur le backend, tout fonctionne bien sauf le fait que mon authentification échoue parce que le cookie n'est pas ajouté à la demande.

Après une recherche en ligne j'ai trouvé que je devais définir {withCredentials : true} sur chaque requête http. J'ai réussi à le faire sur une seule requête, et il fonctionne, mais pas sur toutes les demandes.

J'ai essayé d'utiliser BrowserXhr Comment envoyer "Cookie" dans l'en-tête de demande pour toutes les demandes dans Angular2? mais il ne fonctionne pas et il est également déconseillé autant que je sache.

J'ai aussi essayé RequestOptions mais il ne fonctionne pas.

Que puis-je faire pour régler {withCredentials: true} sur chaque requête http?

Plus Tard Edit:

@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);
  }
}
Salut, je suis confronté au même problème, avez-vous été en mesure de résoudre ce..?
J'ai ajouté le code qui a travaillé pour la mea

OriginalL'auteur exilonX | 2017-11-15

  1. 31

    Vous pouvez utiliser un 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);
    }
}

    Ensuite, vous avez à fournir:

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

    Source et explication complète

    Veuillez éviter lien seules réponses. Des réponses qui sont "à peine plus d'un lien vers un site externe” peut être supprimé.
    Mes excuses, j'ai mis à jour ma réponse avec des exemples de code.
    Notez que cela ne fonctionne que si vous êtes en train de faire des demandes avec @angulaire/common/http, pas avec @angulaire/http.
    Cela ne semble fonctionner pour les requêtes get, tous les conseils sur le post et de le mettre?
    Le HttpInterceptor n'est pas limité à GET demandes et devrait également fonctionner pour les POST et PUT.

    OriginalL'auteur Venomy

  2. 0

    Un autre peut-être plus simple est de créer votre propre ApiService. Elle serait d'utiliser l'injection d'une HttpClient. Toutes les demandes XHR serait d'utiliser la ApiService au lieu de HttpClient directement.

    Voici un exemple de mise en œuvre:

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

    Une partie du code que j'ai modifié:

    @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));
  }

    OriginalL'auteur Jess