web-dev-qa-db-fra.com

XMLHttpRequest ne peut pas charger XXX Aucun en-tête 'Access-Control-Allow-Origin'

tl; dr; À propos de la même origine

J'ai un processus Grunt qui lance une instance du serveur express.js. Cela fonctionnait parfaitement jusqu'au moment où il a commencé à servir une page vierge avec les informations suivantes figurant dans le journal des erreurs de la console du développeur dans Chrome (version la plus récente):

XMLHttpRequest ne peut pas charger https://www.example.com/ Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur le .__ demandé. Ressource. Origin ' http: // localhost: 4300 ' n’est donc pas autorisé à accéder.

Qu'est-ce qui m'empêche d'accéder à la page?

javascriptcorssame-origin-policy
63
Peter David Carter

Le serveur cible doit autoriser les requêtes croisées. Pour le permettre via express, gérez simplement la requête d'options http:

app.options('/url...', function(req, res, next){
   res.header('Access-Control-Allow-Origin', "*");
   res.header('Access-Control-Allow-Methods', 'POST');
   res.header("Access-Control-Allow-Headers", "accept, content-type");
   res.header("Access-Control-Max-Age", "1728000");
   return res.sendStatus(200);
});
3
Daphoque

Cela se produit à cause de l'erreur CORS. CORS est synonyme de partage de ressources d'origine croisée. En termes simples, cette erreur se produit lorsque nous essayons d’accéder à un domaine/une ressource d’un autre domaine. 

Lisez plus à ce sujet ici: Erreur CORS avec jquery

Pour résoudre ce problème, si vous avez accès à l'autre domaine, vous devez autoriser Access-Control-Allow-Origin sur le serveur. Cela peut être ajouté dans les en-têtes. Vous pouvez l'activer pour toutes les demandes/domaines ou pour un domaine spécifique.

Comment faire fonctionner une demande de postage CORS (Cross-Origin Resource Sharing)

Ces liens peuvent aider

2
Vishnu

Cette question de la SCRO n'a pas été approfondie (pour d'autres causes).

Je rencontre actuellement ce problème pour une raison différente… .. Mon front-end renvoie également une erreur d’en-tête «Access-Control-Allow-Origin».

Juste que j'ai pointé la mauvaise URL pour que cet en-tête ne soit pas reflété correctement (dans lequel je présumais que c'était le cas). localhost (front end) -> appel à http non sécurisé (supposé être https), assurez-vous que le point de terminaison de l'API à partir de l'interface frontale pointe vers le protocole correct.

0
morph85