web-dev-qa-db-fra.com

Comment faire des requêtes HTTP compatibles CORS dans Angular 2?

L'erreur est la suivante:

XMLHttpRequest ne peut pas se charger http://some_url.herokuapp.com/api/some_api/ . Aucun en-tête "Access-Control-Allow-Origin" n'est présent sur la ressource demandée. L'origine ' http: // localhost: 30 ' n'est donc pas autorisée à accéder. La réponse avait le code d'état HTTP 503.

en appelant

renvoyer this._http.post (requestUrl, JSON.stringify (requestBody), requestOptions)

J'ai eu des problèmes avec CORS (en travaillant avec Angular 1 ) dans le passé et je me souviens qu'une fois que CORS était activé côté serveur, je devais transforme la requête http pour analyser certains en-têtes HTTP .

Je suis assez confus quant à la façon dont cela devrait fonctionner, donc toute explication est la bienvenue.

15
dragonmnl

En fait, ce n'est pas un problème Angular2 mais un problème côté serveur. La demande OPTIONS en amont doit renvoyer un Access-Control-Allow-Origin en-tête dans sa réponse.

L'envoi de l'en-tête Origin dans la demande d'origine activera la prise en charge CORS côté serveur. Cet en-tête est automatiquement ajouté par le navigateur lorsqu'il détecte que le domaine de la demande n'est pas le même que celui de l'appelant.

Soyez prudent lorsque vous implémentez la requête OPTIONS de contrôle en amont côté serveur car les informations d'identification ne sont pas envoyées à ce niveau . Ils ne sont envoyés que dans la demande cible. Cela semble être le problème car vous avez une erreur 503. Vous essayez de vérifier si la demande OPTIONS est authentifiée, mais ce n'est pas le cas ...

Voir cet article pour plus de détails:

17
Thierry Templier