5

I'm creating a web app using AngularJS. To test it, I'm running the app in a NodeJS server, using angular-seed template.

In this app, I need to send a JSON message to another host, via POST request, and get the response, so, I'm using CORS.

My request is done by implementing a service that uses AngularJS http service (I need the level of abstraction that $http provides. So, I don't use $resource).

Here, my code. Please pay attention to the fact that I modify $httpProvider to tell AngularJS to send its requests with the appropriate CORS headers.

angular.module('myapp.services', []). // Enable AngularJS to send its requests with the appropriate CORS headers // globally for the whole app: config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.useXDomain = true; /** * Just setting useXDomain to true is not enough. AJAX request are also * send with the X-Requested-With header, which indicate them as being * AJAX. Removing the header is necessary, so the server is not * rejecting the incoming request. **/ delete $httpProvider.defaults.headers.common['X-Requested-With']; } ]). factory('myService', function($http) { return { getResponse: function() { var exampleCommand = JSON.stringify({"foo": "bar"}); // This really doesn't make a difference /* var config = {headers: { 'Access-Control-Allow-Origin':'*', 'Access-Control-Allow-Headers': 'Content-Type, Content-Length, Accept', 'Content-Type': 'application/json' } }; */ //return $http.post(REMOTE_HOST, exampleCommand, config). return $http.post(REMOTE_HOST, exampleCommand). success(function(data, status, headers, config) { console.log(data); return data; }). error(function (data, status, headers, config) { return {'error': status}; }); } } });

The problem is I can't make it work. I always get this error message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at REMOTE_HOST. This can be fixed by moving the resource to the same domain or enabling CORS.

But if I do a simple jQuery AJAX call like this:

$.ajax(REMOTE_HOST, { dataType: "json", type: "POST", data: exampleCommand, success: function(data) { console.log(data); }, error: function(request, textStatus, errorThrown) { console.log("error " + textStatus + ": " + errorThrown);} });

It works fine.

So, my questions:

- How do I allow cross-site requests in an AngularJS running under NodeJS?

UPDATE: Thanks to Dayan Moreno Leon's response.

My problem is I need to add cors support to my server. I'm using NodeJS http-server for development and lighttpd for production.

- Why does the simple jQuery POST request work but AngularJS POST request doesn't?

I guess jQuery AJAX requests are cross-domain by default. Not really sure yet.

Many thanks in advance

Improve this question
3
  • Sorry for the simplistic comment but can you not just use JSONP? Commented Jun 6, 2014 at 13:52
  • @Chris the problem with JSONP is that you need to implement a specific logic for it, meaning tou have to tell your server to build a js response and wrap de response inside a callback function call, which makes it very jsonp specific, so you won't be able to reuse that in non jsonp calls, besides it is limited to json unless you implement your own response callback parser function. using cors is way mor consisten and clean in both server and client, might look like a pain in the b.. at first but it will save you a lot of time and effort when sharing resources Commented Jun 6, 2014 at 14:32
  • There is no such thing as useXDomain in Angular. It never made into the Angular code. github.com/angular/angular.js/issues/2956 Commented Dec 16, 2014 at 4:15

2 Answers 2

Reset to default
4

CORS is not handled on the client but in the server you need to allow CORS on your nodejs app where your angular app is trying to POST. you can try using cors module if you are using express

https://www.npmjs.org/package/cors

other whise you need to check for the options method and return 200 as a response

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

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

7 Comments

I'm not using express. So, do I need to previously send an OPTIONS request, get the 200 status response and then send the POST request? Because I think the high level $resource service automatically does it, but I can't use it here.
no, you don't need to do anything, thats all handled by the browser, your client side code remains the same no matter the origin, the POST,PUT, and DELETE are complex requests so the browser first issues an options request, and when it receives the go ahead (200) it sends the actual request, but for that to work your server needs to be able to respond to complex requests aswell check this post annasob.wordpress.com/2012/01/11/…
Ok. I see the OPTIONS request sent in the browser console. Sorry, I read too fast. I need to modify the server. But I'm really using Node http-server app (github.com/nodeapps/http-server). I don't know how to configure it. Maybe I could change to lighttpd (the production server)
Not working yet. But I think I'm close. I updated the question
did you check out the post i linked in my last comment?
|
3

Why does the simple jQuery POST request work but AngularJS POST request doesn't?

jQuery uses simple requests while AngularJS uses preflighted requests

In your angular code you can add set Content-Type to application/x-www-form-urlencoded and encode your data using $.param

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.