Enabling CORS in Angular JS

I was recently experimenting with building an API with django-tastypie and make it accessible via CORS, so it can be used from a different host from an AngularJS app.

For the Django part it was relatively straightforward. I could have either written my own Middleware, dealing with incoming CORS requests, but decided to use django-cors-headers in the end. Following the instructions in the github repo and adding my host where AngularJS is hosted to the CORS_ORIGIN_WHITELIST setting did enable the Django server to handle CORS.

With AngularJS it was a little more tricky, mainly because information is spread all over the web. Beside the fact that I was trying to implement a service using ngResource to communicate with the API, the following did enable AngularJS to send its requests with the appropriate CORS headers globally for the whole app:

var myApp = angular.module('myApp', [
    'myAppApiService']);

myApp.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }
]);

_

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.

Write a comment

You can use reStructeredText syntax to write a comment.

captcha
11 months, 1 week ago (2013-05-19)
 by shie

awesome post thanks!

10 months, 3 weeks ago (2013-05-31)
 by rookiee

Man, you made my day.. been struggling with this for few days.

Thankyou!!!

10 months, 2 weeks ago (2013-06-12)
 by jordan

This worked for me for all requests except POST. When Angular makes the OPTIONS request before my POST, i still get a 405 saying the OPTIONS method is not allowed. Has anybody else run into this?

10 months, 1 week ago (2013-06-18)
 by karthik

In our project, I tried to use $http POST as well as GET, but OPTIONS request goes before and hangs after that.

jordan - For you is GET Request working?

10 months ago (2013-06-24)
 by Torsten

When using the $resource module and doing a save (POST request) it does work fine for me. The OPTIONS request is fired in correct order. I will try it with plain $http dependency and get back to you here.

10 months ago (2013-06-24)
 by Torsten

Works as well with $http.post for me. Maybe you can send a simple not working example of yours and I'll check. Simple contact me at http://better-inter.net/about/ and I get back to you.

8 months ago (2013-08-19)
 by Mark

Thankyou so much! Saved me a lot of time...

8 months ago (2013-08-20)
 by Mike Ward

Worked liked a charm. Even with post. Thanks man!

7 months, 1 week ago (2013-09-11)
 by fp

I run into the same problem.

I´m using ngResource.

$httpProvider.defaults.useXDomain = true works fine for GET-Requests but when i use the save()-method from ngResource it do a OPTIONS Request instead a POST-Request. Can someone here provide help.

Thanks

6 months, 1 week ago (2013-10-17)
 by Klas Mellbourn

The weird thing is that I did not have to do this. As long as the server is correctly set up for CORS, my angular app worked anyway. Am I missing something?

5 months, 2 weeks ago (2013-11-05)
 by Torsten

@fp OPTIONS request is the usual behavior in CORS. Your server might not be correctly set up to support CORS, that's why you can not do further requests.

@Klas Mellbourn thx for the reply. Maybe it depends on the AngularJS version. I wasn't updating for a while since I use this approach. What is the version you are using?

3 months ago (2014-01-21)
 by bestantigua

This is an amazing tip and I agree that its quick and dirty but ideal. I first saw that ahh I need python not knowing that it must already bebundled with my mac Unix version. So I ran my own server for dev testing as quick as that. Thanks for sharing. Can I plug antigua blog ?

2 months, 3 weeks ago (2014-01-28)
 by Payam

hi, i have a problem with sending "DELETE" request to my server using AngularJS. I followed your instructions but only query() and get() methods works flawless, but remove() function which user {method: "DELETE"} does not work and my server receives OPTIONS instead of DELETE. Thank you for your help

2 months, 3 weeks ago (2014-01-31)
 by Torsten

@bestantigua Not sure what antigua blog is, but glad I could help. --- @Payam I never tried it with a DELETE request. I recenlty switched to restangular (https://github.com/mgonto/restangular) since I felt the angular.resource is a little to abstract for my use cases. I'll let you know once I will need to deal with DELETE requests there. Maybe that helps with the resource object as well.