web-dev-qa-db-fra.com

Comment ajouter un en-tête d'autorisation à une requête http angulaire?

Ceci est mon premier message posté.

Je viens juste de commencer à apprendre Go and Angular et j'essaie de connecter l'application angulaire à une api go. J'ai écrit les deux et je suis coincé en identifiant la racine du problème. Je pensais que c'était un problème CORS, mais cela fonctionne bien si je n'inclus pas la ligne de code des en-têtes dans ma requête http angulaire. À ce stade, j'essaie simplement d'ajouter l'en-tête. Le code d'autorisation n'est pas encore implémenté.

Les deux applications s'exécutent localement avec l'application Go sur le port 5000 et Angular sur 4200.

Requête http angulaire qui ne fonctionne pas:

this.http.get<ProjectedBalance>(requestUrl, {headers: new HttpHeaders().set('Authorization', 'my-auth-token')})
    .subscribe(data => {
     this.projBalance = data.projBalance;
   }

Requête http angulaire qui fonctionne:

this.http.get<ProjectedBalance>(requestUrl)
    .subscribe(data => {
     this.projBalance = data.projBalance;
   }

Je reçois cette erreur: 

La réponse à la demande de contrôle en amont ne réussit pas la vérification du contrôle d'accès: Non L'en-tête 'Access-Control-Allow-Origin' est présent sur le .__ demandé. Ressource. Origin ' http: // localhost: 4200 ' n'est donc pas autorisé accès. La réponse avait le code d'état HTTP 403

J'utilise les codes gorilla/mux et gorilla/handlers dans mon code go

router := mux.NewRouter()
router.HandleFunc("/home/{endDate}", GetProjBalance).Methods("GET", "OPTIONS")
headersOk := handlers.AllowedHeaders([]string{"X-Requested-With, Content-Type, Authorization"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})
//start server on port
log.Fatal(http.ListenAndServe(":5000", handlers.CORS(originsOk, headersOk, methodsOk)(router)))

En-têtes de Chrome Dev Tools

Request URL:http://localhost:5000/home/2020-12-21
Request Method:OPTIONS
Status Code:403 Forbidden
Remote Address:[::1]:5000
Referrer Policy:no-referrer-when-downgrade

Response Headers
view source
Content-Length:0
Content-Type:text/plain; charset=utf-8
Date:Mon, 20 Nov 2017 21:39:43 GMT

Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9,uz;q=0.8
Access-Control-Request-Headers:authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:5000
Origin:http://localhost:4200
angulargogorilla
6
gobuckeyes2

En ce qui concerne la meilleure façon de traiter les en-têtes d’authentification dans Angular> 4, il est préférable d’utiliser
Http Interceptors pour les ajouter à chaque demande et utiliser ensuite
Guards pour protéger vos itinéraires.

Voici un exemple complet d'une AuthInterceptor que j'utilise dans mon application:

auth.interceptor.ts

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

import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        'Authorization': `Bearer ${AuthService.getToken()}`,
      },
    });

    return next.handle(req);
  }
}

Vous devez enregistrer votre intercepteur dans le app.module en tant que fournisseur:

app.module.ts

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthInterceptor } from '../auth/auth.interceptor';

...

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

...

Vous pouvez en savoir plus sur cette méthode dans ce post .

En ce qui concerne le Go, il s’agit très probablement d’un déséquilibre entre
Request Headers que vous envoyez et les en-têtes CORS permettent.
La première chose que vous devriez essayer est de les autoriser toutes:

headersOk := handlers.AllowedHeaders([]string{"*"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

Et si le problème persiste, essayez de structurer votre CORS avec soin en fonction de ce que votre client envoie.

18
Mihailo

Voici un exemple:

this.http
        .get(url, return new RequestOptions({
          headers: new Headers({
            Authorization: `Bearer ${authtoken}`
          }),
        }))
        .map(res => res.json());
0
David Alexander