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.

5 years, 2 months ago (2013-05-19)
 by shie

awesome post thanks!

5 years, 2 months ago (2013-05-31)
 by rookiee

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


5 years, 2 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?

5 years, 1 month 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?

5 years, 1 month 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.

5 years, 1 month 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.

4 years, 12 months ago (2013-08-19)
 by Mark

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

4 years, 12 months ago (2013-08-20)
 by Mike Ward

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

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


4 years, 10 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?

4 years, 9 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?

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

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

4 years, 6 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.

4 years, 2 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?

3 years, 6 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;
3 years, 6 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

3 years ago (2015-08-11)
 by mahaveer

But it doesnt seems to work on iE8 :(

2 years, 6 months ago (2016-02-05)
 by dfgsdf


2 years, 5 months ago (2016-03-15)
 by andrew

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

2 years, 1 month ago (2016-07-01)
 by rrr


1 year, 2 months ago (2017-05-22)
 by dfd


2 months, 3 weeks ago (2018-05-21)
 by Richardamits

Click Here!

1 month ago (2018-07-10)
 by medanFlout

Разобравшись в том, каким образом работает принцип осознанного сновиденияи изучив способы управления сознанием, Вы сможете получить незабываемый опыт. Благодаря развитию технологий, появилась возможность окунуться в виртуальную реальность - в этом Вам поможет прибор для осознанных снов. Данное устройство доступно для заказа на нашем сайте по самой оптимальной цене.

Проанализируйте свои сны за последние месяцы, сколько раз вы находились в состоянии между сном и реальностью, не осознавая до конца, что происходит. А сколько раз вам снились кошмары? Помимо этого, многие люди впадают в состояние паралича во время сна - при этом Вам кажется, что Вы не можете двигаться. Существует уникальная возможность избежать неприятных ощущений во сне и самому выбирать сюжет сновидения, который станет увлекательным путешествием Вашего подсознания. Заказав на нашем сайте прибор "DreamTrainer", Вы навсегда забудете о кошмарных сновидениях.

Метод осознанных сновидений, говоря современным языком, позволит вам создать контролируемую виртуальную реальность, в которой вы сможете полностью управлять своим сном. Во сне Вы сможете воплотить любые свои фантазии, разобраться со своим внутренним миром, избавиться от многих проблем - приборы для осознанных сновидений созданы именно для этих целей.

Методика, по которой работает прибор осознанного сна инновацционна и, как все гениальное, достаточно проста. Специальное устройство, в котором установлен акселерометр и светодиоды, устанавливается на одной из дужек очков и реагирует на малейшее изменение положения туловища или кивок головы. Таким образом, обращая внимание на изменения индикаторов, Вы сможете контролировать свое состояние. Приучая свой мозг контролировать состояние реальности в дневное время, вы, со временем, сможете перейти к осознанным сновидениям и полностью раскрыть их потенциал.

Прибор для осознанных снов был разработан после ряда научных исследований, в ходе которых ученые изучали, как человек может повлиять на свой сон. В ходе изучения специалисты выяснили, что главным условием контроля сновидений является умение осознавать состояние реальности, а окружающие факторы не имеют никакого значения. Теперь данная методика доступна и Вам!

Процесс самосовершенствования очень прост - тренировки отнимут у вас минимум времени. Освоив простую методику, Вы сможете распознавать реальность и использовать это свойство для управления своими снами. Те преимущества, которые вы получите, в тысячи, если не миллионы раз выше по сравнению с доступной стоимостью прибора. Оформляйте заказ прибор "DreamTrainer" и начните новую жизнь уже сегодня!

1 week ago (2018-08-08)
 by Radikbrume

Meet a guy to communicate and more write I won't bite you +79967254947 boys write WhatsApp +79967254947 boys write WhatsApp +79967254947 boys write WhatsApp +79967254947