Enabling CORS in Angular JS

Note: This post covers how to enable CORS with AngularJS<1.2. Apparently in the latest AngularJS versions you don't have to add anything to make it work.

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', [

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.

4 years ago (2013-05-19)
 by shie

awesome post thanks!

3 years, 12 months ago (2013-05-31)
 by rookiee

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


3 years, 11 months 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?

3 years, 11 months 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?

3 years, 11 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.

3 years, 11 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.

3 years, 9 months ago (2013-08-19)
 by Mark

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

3 years, 9 months ago (2013-08-20)
 by Mike Ward

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

3 years, 8 months 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.


3 years, 7 months 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?

3 years, 6 months 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 years, 4 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 ?

3 years, 3 months 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

3 years, 3 months 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.

2 years, 11 months ago (2014-06-17)
 by anshu

AngularJs resource not working in IE 8/9 due to CORS issue. I had resolved using $ajax, but client want resolution in angularjs itself.. $httpProvider.defaults.useXDomain = true;

System Message: ERROR/3 (<string>, line 4)

Unexpected indentation.
delete $httpProvider.defaults.headers.common['X-Requested-With'];

System Message: WARNING/2 (<string>, line 5)

Block quote ends without a blank line; unexpected unindent.

Not working above code for IE9. I tried to figured out last few months,but still nothing get in my hand. How to resolve cors issue in ie9 using angularjs?

2 years, 4 months ago (2015-01-22)
 by sharedmocha

In below code where should i add the above code ?

function customersController($scope,$log,$http) {

    var promise = $http({
        url: 'hhttps://test.com',
            method: 'POST',
            params: {
                contacts: "+123",
                text: "Testing"
            headers: {
                'Content-Type': 'application/json' , 'Access-Control-Allow-Origin': '*'
        }).then(function(response) {
            $scope.dam = response.id;

        return promise;
                    $scope.dam1 = promise;
2 years, 3 months ago (2015-02-13)
 by Anil Singh

Its Awesome post!! Helpful for me!!

It might help you!! http://www.code-sample.com/2015/02/enabling-cors-in-angularjs.html

1 year, 9 months ago (2015-08-11)
 by mahaveer

But it doesnt seems to work on iE8 :(

1 year, 3 months ago (2016-02-05)
 by dfgsdf


1 year, 2 months ago (2016-03-15)
 by andrew

alert("Hello! I am an alert box!!");

10 months, 4 weeks ago (2016-07-01)
 by rrr


3 days, 21 hours ago (2017-05-22)
 by dfd