AngularJS:请求的资源上没有"Access-Control-Allow-Origin"标头

Rag*_*arr 45 html javascript xmlhttprequest cors angularjs

我正在写我的webApp,而且我正在使用AngularJS.在这个应用程序中,我创建了一个名为script.js的文件,并报告此代码:

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";
            });
    });
Run Code Online (Sandbox Code Playgroud)

使用此代码,我按照RESTful原则调用API.当我运行代码时,我遇到了这个问题:

XMLHttpRequest无法加载https://api.getevents.co请求的资源上没有"Access-Control-Allow-Origin"标头.原产地" 的http://本地主机:8383 "因此不允许访问.

在网上阅读我明白我有一个叫CORS的问题...我已经尝试了几个解决方案,但我没有解决问题.
我该如何解决这个问题?
我必须添加什么代码来修复它?

Cap*_*apK 58

这是服务器端问题.您不需要为角色添加角度的任何标题.您需要在服务器端添加标头:

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
Run Code Online (Sandbox Code Playgroud)

前两个答案:如何在AngularJs中启用CORS

  • 这将取决于您的服务器技术,我发现了一个w3链接有很好的选择:http://www.w3.org/wiki/CORS_Enabled (5认同)
  • 我在代码中编写此代码的方式和位置? (4认同)

Rit*_*esh 30

CORS是跨源资源共享,如果您尝试从一个域访问另一个域,则会出现此错误.

尝试使用JSONP.在您的情况下,JSONP应该工作正常,因为它只使用GET方法.

尝试这样的事情:

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
});
Run Code Online (Sandbox Code Playgroud)

  • 由于这些成功和错误方法不可链接,因此它们从角度中移除.我们应该使用`.then()`http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6 (2认同)