AngularJS POST http://localhost:8080/test/GetAllLocation 405 (Method Not Allowed)

Question

I have to get JSON data from the below GET Service

http://localhost:8080/test/GetAllLocation

When I hit above URL into my browser this gives me JSON data. But I am unable to get JSON data into my AngularJS application.

My controller code is give below

(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 }
            }
        };
    }
})();

When I run this application this will give me below error

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.

you have CORS issues with your server. you need to configure CORS for AJAX calls to be succesful — Dayan Moreno Leon, Jan 08 '17 at 09:01
@DayanMorenoLeon But that is also one other AngularJS POST http://localhost:8080/test/GetAllLocation 405 (Method Not Allowed) — user3441151, Jan 08 '17 at 09:06

score 0 · Answer 1 · edited May 23 '17 at 12:33

Your issue is CORS. I would do some reading on CORS. In particular "No 'Access-Control-Allow-Origin' header is present on the requested resource" leads you to believe the issue is with the header.

The issue can also be the server not being properly configured for CORS, however on the angular side try setting options for $HTTP in your app settings, here is an example of mine for Django:

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

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

This changes the header name which has the XSRF token, which already has a default (see the doc). The actual header name may need to changed, I'm not sure of your server side implementation. If you are using Django let me know, I have more data for Django config.

Here is a similar post

Are you using Django? If not, it probably has to be modified. It goes in your app's config as shown. Above this line in my code, app is defined as angular.module with dependencies. You probably have your angular.module and it can contain a .config. https://docs.angularjs.org/guide/module — Diesel, Jan 08 '17 at 10:17

score 0 · Answer 2 · answered Jan 08 '17 at 18:10

You are making API request to http://localhost:8080 but your client is running on different web server/port. Ideally, instead of allowing CORS, you should have your client running on the same server.

Your browser blocks the API requests if the application is making API requests to another server on account of security issues. However this can be allowed by setting 'Access-Control-Allow-Origin' header on your APIs.

Depending on the type of server running on http://localhost:8080, you need to set 'Access-Control-Allow-Origin' header on your APIs. You can choose to allow specific domains or all domains(*) to get programmatic access to your APIs.

AngularJS POST http://localhost:8080/test/GetAllLocation 405 (Method Not Allowed)

2 Answers2