POST issue in Angular JS

Question

I am running my frontend in Node js and backend in Jetty.I am trying to post data from frontend using angular JS but its not working for me .Can anyone suggest what could be the issue? Node Js running in port 3000 and jetty running in 9011. Here is the code snippet:

var app = angular.module("loginapp", []);

        app.controller("loginctrl", function($scope,$http) {
        app.config(['$sceDelegateProvider', function($sceDelegateProvider) {
            $sceDelegateProvider.resourceUrlWhitelist(['self', 'http://localhost:9011/**']);
             }]);

                $scope.login = function(e){
                    console.log('clicked login...');
                    e.preventDefault();                 

                    $http({
                              url: "http://localhost:9011/test/dummy/doStuff1",
                              method: "POST",
                              data : {username: $scope.userName, password: $scope.password},
                              headers: { 'Content-Type': 'application/json' },
                              withCredentials: false,
                              }).success(function (data, status, headers, config) {
                                    console.log('status',status);
                                    console.log('data',status);
                                    console.log('headers',status);
                            }); 

                }

        });

In the browser console it shows:

POST http://localhost:9011/test/dummy/doStuff1 
(index):1 XMLHttpRequest cannot load http://localhost:9011/test/dummy/doStuff1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500.

I am not sure what causing the issue can someone help me on this?

The POST is not able to invoke the backend module. I am not sure whats causing the issue.Can you please help me to ascertain the cause. — user3062513
– user3062513, Commented Mar 14, 2015 at 17:05

Ryan · Accepted Answer · 2015-03-14 18:55:07Z

1

If you are hosting your angular app on node(localhost:3000) and trying to make an ajax request to jetty(localhost:9011) you are going to have CORS(http://enable-cors.org/) issues. By default the browser won't let you make a request to a different domain. You need to enable CORS on the server and in your angular app.

Server side obviously depends on the framework you're using. An example using Jersey: http://blog.usul.org/cors-compliant-rest-api-with-jersey-and-containerresponsefilter/

Then enable CORS in Angular(this may not be necessary in your case... it is required if you load templates from a different domain):

//Allow CORS requests to these urls:
$sceDelegateProvider.resourceUrlWhitelist([
   'self',
   'http://localhost:9011/**'
]);

edited Mar 14, 2015 at 18:55

answered Mar 14, 2015 at 18:38

Ryan

5,99334 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3062513 Over a year ago

I did as you suggested but still its not working.I have updated the Question with the configuration you suggested.Can you please suggest what i am missing?

Ryan Over a year ago

What are you using for the backend? Did you enable CORS on the backend?

user3062513 Over a year ago

I am running REST service in Jetty in backend. I have enabled the container response filter as you suggested in backend.However the backend is not able to receive the request.I see the filter is invoked but the method whcih i am trying to invoke is not happening.Can you please tell me what i am missing?

user3062513 Over a year ago

I have edited the question. The issue is still persisting but the error message is different. Can you please tell me what could be the issue?

Ryan Over a year ago

It looks like CORS is not setup properly on the backend. The message is telling you to set the Access-Control-Allow-Origin header. Make sure that is set to the domain you are requesting from(localhost:3000) and you should enable it for OPTIONS requests because the browser will do a preflight(OPTIONS) request when it isn't a simple request.

Collectives™ on Stack Overflow

POST issue in Angular JS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related