Comment résoudre les erreurs CORS lors de l'ajout d'en-têtes d'autorisation dans Angular ?

Ajout d'un en-tête d'autorisation aux requêtes HTTP angulaires

Problème :

Une application angulaire rencontre une erreur CORS lors de l'ajout d'un en-tête "Authorization" à une requête HTTP. L'erreur est :

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403

Bonnes pratiques :

Dans Angular 4 et versions ultérieures, il est recommandé d'utiliser des intercepteurs HTTP pour ajouter des en-têtes d'authentification aux requêtes et des gardes pour protéger routes.

Implémentation angulaire :

Pour utiliser un AuthInterceptor, créez un fichier TypeScript (par exemple, auth.interceptor.ts) :

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
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);
  }
}

Ensuite, enregistrez l'intercepteur dans 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,
    },
    ...
],

...

Allez Implémentation :

Côté Go, s'assurer que le middleware CORS autorise la requête nécessaire en-têtes :

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

Si le problème persiste, configurez soigneusement les paramètres CORS pour qu'ils correspondent aux en-têtes envoyés par le client.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!