web-dev-qa-db-fra.com

AngularJS: aucun en-tête "Access-Control-Allow-Origin" n'est présent sur la ressource demandée

J'écris ma webApp et j'utilise AngularJS. Dans cette application, j'ai créé un fichier appelé script.js et je rapporte ce code:

var modulo = angular.module('progetto', ['ngRoute']);

    // configure our routes
    modulo.config(function ($routeProvider, $httpProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl: 'listaFilm.html',
                controller: 'listaController'
            })

            // route for the description page
            .when('/:phoneName', {
                templateUrl: 'description.html',
                controller: 'descriptionController'
            });


            $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

    });


    modulo.controller('listaController', function ($scope, $http) {
        $http.get('https://api.getevents.co/event?&lat=41.904196&lng=12.465974').success(function (data) {
            $scope.names = data;
            }).
            error(function (data, status) {
                $scope.names = "Request failed";
            });
    });

Avec ce code, j'appelle l'API selon les principes de RESTful. Quand je lance le code, j'ai ce problème:

XMLHttpRequest ne peut pas charger https://api.getevents.co Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin ' http: // localhost: 838 ' n'est donc pas autorisé à accéder.

En lisant sur le Web, j'ai compris que j'avais un problème appelé CORS ... J'ai essayé plusieurs solutions proposées mais je n'ai pas résolu le problème.
Comment puis-je résoudre le problème?
Quel est le code que je dois ajouter pour le réparer?

javascripthtmlangularjsxmlhttprequestcors
44
Ragnarr

Ceci est un problème côté serveur. Vous n'avez pas besoin d'ajouter d'en-tête dans angular pour cors. Vous devez ajouter un en-tête côté serveur:

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *

Les deux premières réponses ici: Comment activer CORS dans AngularJs

57
CapK

CORS est un partage de ressources d'origine multiple, vous obtenez cette erreur si vous essayez d'accéder d'un domaine à un autre.

Essayez d'utiliser JSONP. Dans votre cas, JSONP devrait fonctionner correctement car il utilise uniquement la méthode GET.

Essayez quelque chose comme ça:

var url = "https://api.getevents.co/event?&lat=41.904196&lng=12.465974";
$http({
    method: 'JSONP',
    url: url
}).
success(function(status) {
    //your code when success
}).
error(function(status) {
    //your code when fails
});
30
Ritesh