La résolution de l'erreur « Le champ d'en-tête de demande Access-Control-Allow-Headers n'est pas autorisé par Access-Control-Allow-Headers »

Dans pour tenter de rectifier l'erreur initiale, des en-têtes ont été ajoutés à la demande pour autoriser diverses méthodes et en-têtes. Cependant, cela a conduit à une nouvelle erreur : "Le champ d'en-tête de demande Access-Control-Allow-Origin n'est pas autorisé par Access-Control-Allow-Headers."

Comprendre CORS et les demandes de contrôle en amont

Le problème vient du fait que les navigateurs envoient une requête OPTIONS de contrôle en amont pour les requêtes d'origine croisée avec certains types de contenu. Par défaut, Angular envoie des données avec un type de contenu application/json, ce qui déclenche cette demande de contrôle en amont.

Réponse et en-têtes du serveur

Le serveur doit explicitement autoriser l'accès. En-tête Control-Allow-Headers dans sa réponse pour éviter l’erreur. Sinon, le navigateur interprétera la réponse comme n'autorisant aucun en-tête.

Solution : Modification du type de contenu ou de la réponse du serveur

Pour résoudre le problème, modifiez le client ou configuration du serveur :

1. Côté client (angulaire) :

Remplacez le type de contenu angulaire par défaut par application/x-www-form-urlencoded, ce qui ne déclenche pas de demande de contrôle en amont :

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

2. Côté serveur :

Vous pouvez également autoriser l'en-tête Access-Control-Allow-Headers sur le serveur. Les en-têtes de réponse suivants doivent être définis :

• Access-Control-Allow-Origin : * ou l'origine spécifique (par exemple, https://example.com)
• Access-Control -Allow-Methods : GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers : tous les en-têtes que le client envoie dans la demande (par exemple, Content-Type, Authorization)