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做一些阅读。特别是"请求的资源上不存在'访问控制-允许源'标头"导致您认为问题出在标头上。

问题也可能是服务器未针对 CORS 正确配置，但是在角度方面尝试在您的应用程序设置中设置$HTTP选项，这是我为 Django 举的一个例子：

app.config(['$httpProvider',
  function ($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}

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

这是一个类似的帖子

Answer 2

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

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

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