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的編程訪問。