web-dev-qa-db-fra.com

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.

Je reçois cette erreur lorsque j'essaie d'exécuter mon service Web à partir de 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.

<form name="LoginForm" ng-controller="LoginCtrl" ng-submit="init(username,password,country)">
    <label>Country</label><input type="text" ng-model="country"/><br/><br/>
    <label>UserName</label><input type="text" ng-model="username" /></br></br>
    <label>Password</label><input type="password" ng-model="password">
    </br>
    <button type="submit" >Login</button>
</form>

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 correctement lorsque je clique dessus à partir de la barre d’URL. Comment résoudre le problème? Aide aimablement!

angularjsajaxcorscross-domain
69
Ru11

Chrome Webstore comporte une extension qui ajoute l'en-tête "Access-Control-Allow-Origin" pour vous lorsqu'un appel asynchrone dans la page tente d'accéder à un hôte différent du vôtre.

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

26
Patricio Córdova

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 renvoie toujours une erreur, cela impliquerait que le serveur sur lequel vous effectuez la demande doit accepter les demandes CORS et doit être configuré pour cela.

18
ALi Mir

C'est un CORS issue. Vous pouvez modifier certains paramètres angulaires. C’est ceux que j’ai généralement définis dans la méthode .config angulaire (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 du réseau, vous verrez qu'il envoie une demande OPTIONS initialement. 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 qu’elle ne fait pas de demande d’origine croisée, alors que votre code angulaire l’est.

16
Lee Willis

J'ai une solution ci-dessous et ça marche 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 ', un paramètre callback doit obligatoirement renvoyer JSON_CALLBACK avec des données.
Voici 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!"}
4
Nadimul De Cj

J'ai ajouté ceci et cela a bien fonctionné pour moi.

web.api

config.EnableCors();

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

Dans un contrôleur, vous ajouterez en haut pour l'étendue globale ou sur chaque classe. C'est à vous.

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

En outre, lorsque vous transmettez ces données à Angular, il souhaite que le fichier .cshtml soit également appelé. Sinon, il transmettra les données sans renseigner l'affichage.

(function () {
    "use strict";
    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 quelqu'un, qu'il m'a fallu un certain temps pour comprendre Entity Framework et pourquoi la SCRO est si utile. 

2
John Aldrin

Dans mon cas, j'essayais de frapper un service WebAPI sur localhost depuis une application MVC utilisant beaucoup de code angulaire. Mon service WebAPI a bien fonctionné avec Fiddler via http: // localhost/myservice . Une fois que j’ai pris un moment pour configurer l’application MVC afin qu’elle utilise IIS au lieu de IIS Express (composant de Visual Studio), cela fonctionnait correctement, sans aucune configuration liée à CORS.

1
user5373289

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

Exemple: @CrossOrigin (origins = " http: // localhost: 8080 ")

0
user8033402

Remplacez get parjsonp:

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

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 dans les deux sens, mais avec les réponses POST, cela fonctionnait uniquement avec le chemin ajouté.

0
Thomas David Kehoe

Utilisez cette extension pour le chrome. Vous permet de demander n’importe quel site avec ajax de n’importe quelle source. Ajoute à la réponse 'Allow-Control-Allow-Origin: *' header

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

0
Amaru Hash