AngularJS POST http：// localhost：8080 / test / GetAllLocation 405（不允许使用方法）

Question

我必须从下面的GET服务获取JSON数据

http：// localhost：8080 / test / GetAllLocation

当我在浏览器中点击上述URL时，这将为我提供JSON数据。 但是我无法将JSON数据导入到我的AngularJS应用程序中。

我的控制器代码如下

(function () {
    angular
        .module('app')
        .controller('VisitorsController', [ 'myService', VisitorsController])
        .factory("myService", ['$http', function($http) {
            return {
                getResponders: function(servicesUrl) {
                    return $http.get(servicesUrl).then(function(response) {
                        console.log(response.status);
                        return response.data;
                    }).catch(function(response) {
                        console.log(response.status);
                        return response.data;
                    });
                }
            };
            return myService;
        }]);

    function VisitorsController(myService) {
        var vm = this;
        var servicesUrl = 'http://localhost:8080/test/GetAllLocation';
        myService.getResponders(servicesUrl).then(function(data) {
            console.log(data);
            if(data==null) {
                console.log(data);
            } else {
                console.log(data);
            }
        }).catch(function(response) {
            console.log(response.status);
            return response.data;
        });

        vm.visitorsChartData = [ {key: 'UP', y: 5264}, { key: 'Critical', y: 3872},{key: 'Warning', y: 1000} ];
        vm.chartOptions = {
            chart: {
                type: 'pieChart',
                height: 210,
                donut: true,
                x: function (d) { return d.key; },
                y: function (d) { return d.y; },
                valueFormat: (d3.format(".0f")),
                color: ['rgb(0, 150, 136)', '#E75753','#fbbc05'],
                showLabels: false,
                showLegend: false,
                title: 'Over 9K',
                margin: { top: -10 }
            }
        };
    }
})();

当我运行此应用程序时，这将给我以下错误

AngularJS POST http://localhost:8080/test/GetAllLocation 405 (Method Not Allowed)
XMLHttpRequest cannot load http://localhost:8080/test/GetAllLocation. No 'Access-Control-Allow-Origin' header is present on the requested resource.The response had HTTP status code 405.

Answer 1

您的问题是CORS。 我会读一些有关CORS的文章。 特别是“所请求的资源上没有'Access-Control-Allow-Origin'标头”使您相信该标头存在问题。

问题还可能是服务器未针对CORS进行正确配置，但是在角度方面，请尝试在您的应用设置中为$ HTTP设置选项，这是我的Django示例：

app.config(['$httpProvider',
  function ($httpProvider) {

    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}

这将更改具有XSRF令牌的标头名称，该标头名称已具有默认名称（请参阅doc ）。 实际的标头名称可能需要更改，我不确定您的服务器端实现。 如果您使用的是Django，请告诉我，我有更多关于Django配置的数据。

这是一个类似的帖子

Answer 2

您正在向http://localhost:8080发出API请求，但是您的客户端正在其他Web服务器/端口上运行。 理想情况下，应该允许客户端在同一服务器上运行，而不是允许CORS 。

如果应用程序由于安全问题正在向另一台服务器发出API请求，则您的浏览器将阻止API请求。 但是，可以通过在API上设置'Access-Control-Allow-Origin'标头来'Access-Control-Allow-Origin' 。

根据在http://localhost:8080上运行的服务器的类型，您需要在API上设置'Access-Control-Allow-Origin'标头。 您可以选择允许特定域或所有域（ * ）获得对API的编程访问。