Aucun en-tête “Access-Control-Allow-Origin” n’est présent sur la ressource demandée – AngularJS

XMLHttpRequest cannot load http://mywebservice. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. 

J’obtiens cette erreur lorsque j’essaie d’exécuter mon service Web depuis mon code. J’ai essayé de trouver à ce sujet et essayé de nombreuses solutions qui ont été suggérées que j’ai trouvé sur le net. Coller le code ci-dessous.

 





Et le contrôleur forme le js correspondant est:

 app.controller('LoginController', ['$http', '$scope', function ($scope, $http) { $scope.login = function (credentials) { $http.get('http://mywebservice').success(function ( data ) { alert(data); }); } }]); 

Le service Web fonctionne bien lorsque je le frappe depuis la barre d’URL. Comment résoudre le problème? Aide aimablement!

Le Chrome Webstore a une extension qui ajoute l’en-tête ‘Access-Control-Allow-Origin’ pour vous lorsque la page tente de contacter un hôte différent de la vôtre lors d’un appel asynchrone.

Le nom de l’extension est: ” Allow-Control-Allow-Origin: * ” et voici le lien: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Côté client, vous pouvez activer les requêtes cors dans AngularJS via

 app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; } ]); 

Toutefois, si cela génère toujours une erreur, cela impliquerait que le serveur que vous effectuez demande doit autoriser la requête CORS et doit être configuré pour cela.

Ceci est un problème CORS . Vous pouvez modifier certains parameters angulars – ce sont ceux que je définis généralement dans la méthode Angular .config (tous ne sont pas liés à CORS):

 $httpProvider.defaults.useXDomain = true; $httpProvider.defaults.withCredentials = true; delete $httpProvider.defaults.headers.common["X-Requested-With"]; $httpProvider.defaults.headers.common["Accept"] = "application/json"; $httpProvider.defaults.headers.common["Content-Type"] = "application/json"; 

Vous devez également configurer votre service Web – les détails dépendront de la langue côté serveur que vous utilisez. Si vous utilisez un outil de surveillance réseau, vous verrez qu’il envoie une requête OPTIONS au départ. Votre serveur doit répondre de manière appropriée pour autoriser la demande CORS.

La raison pour laquelle cela fonctionne dans votre navigateur est que ce n’est pas une requête d’origine croisée – alors que votre code angular l’est.

J’ai une solution ci-dessous et ses travaux pour moi:

 app.controller('LoginController', ['$http', '$scope', function ($scope, $http) { $scope.login = function (credentials) { $http({ method: 'jsonp', url: 'http://mywebservice', params: { format: 'jsonp', callback: 'JSON_CALLBACK' } }).then(function (response) { alert(response.data); }); } }]); 

dans ‘ http: // mywebservice ‘, il doit y avoir un paramètre callback qui renvoie JSON_CALLBACK avec les données.
Il y a un exemple d’exemple ci-dessous qui fonctionne parfaitement

 $scope.url = "https://angularjs.org/greet.php"; $http({ method: 'jsonp', url: $scope.url, params: { format: 'jsonp', name: 'Super Hero', callback: 'JSON_CALLBACK' } }).then(function (response) { alert(response.data); }); 

exemple de sortie:

 {"name":"Super Hero","salutation":"Apa khabar","greeting":"Apa khabar Super Hero!"} 

J’ai ajouté ceci et ça a bien fonctionné pour moi.

web.api

 config.EnableCors(); 

Ensuite, vous appellerez le modèle en utilisant des cors:

Dans un contrôleur, vous appendez en haut pour la scope globale ou sur chaque classe. C’est à vous.

  [EnableCorsAtsortingbute("http://localhost:51003/", "*", "*")] 

De plus, lorsque vous poussez ces données vers Angular, vous souhaitez également que le fichier .cshtml soit appelé ou il va pousser les données, mais pas remplir votre vue.

 (function () { "use ssortingct"; angular.module('common.services', ['ngResource']) .constant('appSettings', { serverPath: "http://localhost:51003/About" }); }()); //Replace URL with the appropriate path from production server. 

J’espère que cela aide tout le monde, il m’a fallu un certain temps pour comprendre Entity Framework, et pourquoi CORS est si utile.

Dans mon cas, j’essayais de bash un service WebAPI sur localhost depuis une application MVC qui utilisait beaucoup de code angular. Mon service WebAPI fonctionnait bien avec Fiddler via http: // localhost / myservice . Une fois que j’ai pris un moment pour configurer l’application MVC pour utiliser IIS au lieu d’IIS Express (une partie de Visual Studio), cela a bien fonctionné, sans append aucune configuration liée à CORS dans les deux zones.

Jetez un oeil à ces discussions

Access-Control-Allow-Origin et Angular.js $ http

http://forum.rejectedsoftware.com/groups/rejectedsoftware.vibed/thread/10500/

j’ai eu

Aucun en-tête “Access-Control-Allow-Origin” n’est présent

et le problème était avec l’URL que je fournissais. Je fournissais l’URL sans itinéraire, par exemple, https://misty-valley-1234.herokuapp.com/ .

Lorsque j’ai ajouté un chemin, cela fonctionnait, par exemple, https://misty-valley-1234.herokuapp.com/messages . Avec les requêtes GET, cela fonctionnait de toute façon, mais avec les réponses POST, cela ne fonctionnait qu’avec le chemin ajouté.

Utilisez cette extension pour chrome. Vous permet de demander n’importe quel site avec ajax à partir de n’importe quelle source. Ajoute à l’en-tête ‘Allow-Control-Allow-Origin: *’

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

Remplacez get par jsonp :

  $http.jsonp('http://mywebservice').success(function ( data ) { alert(data); }); } 

C’est un problème du côté du serveur. Vous devez append votre adresse client à l’API exposée de votre serveur. Si vous utilisez le travail sur le cadre Spring, vous pouvez annoter @CrossOrgin à partir de org.springframework.web.bind.annotation.CrossOrigin;

Par exemple: @CrossOrigin (origins = ” http: // localhost: 8080 “)

Si vous utilisez chrome: essayez d’ouvrir chrome avec les arguments pour désactiver la sécurité Web comme vous le voyez ici:

Désactiver la même politique d’origine dans Chrome

C’est comme ça que ça a fonctionné pour moi. Pour les utilisateurs Windows testant avec Bracket et AngularJS

1) Allez sur votre bureau

2) Cliquez avec le bouton droit de la souris sur votre bureau et recherchez “NEW” dans la boîte de dialog déroulante qui s’affiche.

3) Choisissez le raccourci

4) Une boîte de dialog s’ouvrira

5) Cliquez sur Parcourir et recherchez Google Chrome.

6) Cliquez sur Ok-> Suivant-> Terminer pour créer le raccourci Google sur votre bureau.

7) Cliquez avec le bouton droit sur l’icône Google Chrome que vous venez de créer

8) Propriétés du clic

9) Entrez ceci dans le chemin cible

 "C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security 

10) Enregistrez-le

11) Double-cliquez sur votre raccourci chromé nouvellement créé et passez votre lien dans la barre d’adresse et cela fonctionnera.