web-dev-qa-db-fra.com

Angular 2 - Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée

Lorsque j'essaie de faire des appels d'API depuis mon Angular 2 App vers mon API, j'obtiens l'erreur suivante:

XMLHttpRequest cannot load http://localhost/myAPI/public/api/v1/auth/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 422.

J'ai vérifié toutes les questions sur le Web et tout ce qui concerne CORS, rien n'a résolu mon problème!

Mon API Laravel fonctionnant sur le port 80. (localhost)

Mon application angulaire 2 fonctionnant sur le port 3000. (localhost: 3000)

  • J'ai essayé d'activer les cors dans Laravel côté avec le middleware Cors
  • Les appels API fonctionnent en utilisant chrome sécurité Web désactivée. La première réponse ici résout le problème, mais je veux vraiment arrêter d'utiliser le CMD et la version non sécurisée chrome à chaque fois que je teste mon application.
  • L'utilisation de chrome extension Les appels de l'API POSTMAN à mon API fonctionnent.

Alors, qu'est-ce qui ne va pas? Pourquoi mon Angular 2 app ne peut pas obtenir des enregistrements de mon API?

laravelangularcors
8
TheUnreal

D'accord. semblent devoir configurer Apache pour cela.

j'utilise xampp webserver, et j'ai dû modifier mon httpd.conf comme expliqué ici pour résoudre ce problème.

Ajout de cette ligne:

Header set Access-Control-Allow-Origin "http://localhost:3000"

résolu mon problème.

Le redémarrage d'Apache est nécessaire.

4
TheUnreal

Ouvrez chrome inspectez l'outil, passez à l'onglet Network et inspectez la requête Angular2 envoyée.

Dans Headers-> Response Headers, vérifiez s'il y a Access-Control-Allow-Origin:* (Je parie que non)

Si vous créez une API, la solution la plus simple consiste à ajouter

if (Request::is("api/*")) {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization, If-Modified-Since, Cache-Control, Pragma");
}

au début de routes.php, l'utilisation d'un middleware serait une meilleure approche, mais assurez-vous qu'il fonctionne correctement et ajoutez le Access-Control-Allow-Origin à l'en-tête de réponse.

1
Kevin
//Add this middleware in your express app
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header('access-Control-Allow-Origin', '*');
next();
});
1
ASHISH RANJAN

J'ai essayé d'activer les cors dans Laravel côté avec le middleware Cors

Avez-vous enregistré des itinéraires pour gérer les demandes OPTIONS?

Si vous ajoutez simplement un middleware aux routes GET et POST existantes et que le navigateur fait une demande OPTIONS, le middleware n'est jamais atteint.

0
Nick