Comment dépanner les en-têtes HTTP angulaires et les problèmes Go CORS ?

Dépannage des en-têtes HTTP Angular et Go CORS

CORS (Cross-Origin Resource Sharing) est souvent une source de maux de tête lors de la connexion d'applications Angular aux API Go. Comprendre comment ajouter des en-têtes d'autorisation dans Angular et gérer CORS dans Go est crucial pour une communication réussie entre les deux.

En-têtes d'autorisation angulaires

Pour ajouter des en-têtes d'autorisation dans Angular, vous devez utiliser des intercepteurs Http. Un exemple d'intercepteur d'authentification est :

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

Enregistrez l'intercepteur dans le module de votre application :

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

Gestion Go CORS

Assurez-vous que votre code Go autorise le en-têtes de requête nécessaires depuis l'application Angular :

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

Si les problèmes persistent, configurez soigneusement vos paramètres CORS pour qu'ils correspondent les en-têtes de requête du client.

Exemple de problème résolu

Le code angulaire suivant :

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

Combiné avec le code Go suivant :

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

Doit réussir à établir la communication entre l'application Angular et l'API Go.

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!