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.

Answer 1

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

Answer 2

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.