Django CORS API from AngularJS

All we need is an easy explanation of the problem, so here it is.

I have enabled CORS in Django, with “django-cors”:

After following the installation steps here, I have set the following:



The django app runs on http://locahost:3000

My frontend is an Angular app, which runs on “http:/localhost:8000”, and I have done the following changes to communicate with the django app.

[Using Restangular for resource APIs]

When I call the GET API, the “OPTIONS” pre-flight call happens, and I get the following error:

XMLHttpRequest cannot load http://localhost:3000/users. Credentials flag is ‘true’, but the ‘Access-Control-Allow-Credentials’ header is ”. It must be ‘true’ to allow credentials. Origin ‘http://localhost:8000‘ is therefore not allowed access.

Looking at the documentation, I understood that I needed to set certain headers which the server would expect as a part of the call. So, I added the following:
RestangularProvider.setDefaultHeaders({“x-requested-with” : ‘XMLHttpRequest’});

However, on making this change, I am getting another error, which I am unable to resolve:
XMLHttpRequest cannot load http://localhost:3000/users. Response for preflight is invalid (redirect)

Note: The request/response headers are as follows:

Remote Address:
Request URL:http://localhost:3000/users
Request Method:OPTIONS

Response Headers
Access-Control-Allow-Headers:x-requested-with, content-type, accept, origin, authorization, x-csrftoken, user-agent, accept-encoding
Access-Control-Allow-Methods:GET, POST, PUT, PATCH, DELETE, OPTIONS
Content-Type:text/html; charset=utf-8
Date:Thu, 17 Dec 2015 11:10:16 GMT
Server:WSGIServer/0.1 Python/2.7.10

Request Headers
Accept-Encoding:gzip, deflate, sdch
Access-Control-Request-Headers:accept, x-requested-with
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I finally managed to resolve the problem. The problem was because of improper API naming.

My colleague had named the API as follows:

url(r'^users/', views.user_details)

And when I would call “/users”, then because of django’s APPEND_SLASH setting, it was doing a permanent redirect to “/users/”. Here’s what the django documentation says about APPEND_SLASH:

When set to True, if the request URL does not match any of the patterns in the URLconf and it doesn’t end in a slash, an HTTP redirect is issued to the same URL with a slash appended. Note that the redirect may cause any data submitted in a POST request to be lost.

The APPEND_SLASH setting is only used if CommonMiddleware
is installed.

Of course, the simplest (and best) way of resolving this problem, is to update the API url by removing the slash, i.e.

url(r'^users', views.user_details)

Then it would match the URL directly, and no redirect will be issued.

However, in case someone really wants to keep the trailing slash in the API, then you can still make it work, by adding the following code in AngularJS:

resourceProvider.defaults.stripTrailingSlashes = false;

The above is however not recommended, but since it came out of my experiments, I am sharing it anyways.

Method 2

I dug around in and found that one can use


in django

this will set the Access-Control-Allow-Credentials response header to True

I now see it’s even documented:

That solved it for me

Method 3

For what it worth, it seems the django-cors documentation only uses hostnames (and not the full URL) in the django settings, like:





Maybe you can try with a simple thing, like localhost, then try if if works, then add the port number and check if it still works ?

Method 4

This CORS creating problems as if you set $httpProvider.defaults.withCredentials = true; in your angular app. i tried many times with many solution but after long search this is my solution for you and i am sure its work for you

just add this code in your Django apache config file its may be httpd.conf file (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccess. then just add this code

<IfModule mod_headers.c>
SetEnvIf Origin (.*) AccessControlAllowOrigin=$1
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Credentials true

or if their is inbuilt code then find your folder directory in that file and only this code in it

SetEnvIf Origin (.*) AccessControlAllowOrigin=$1
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header set Access-Control-Allow-Credentials true

and also you need to change angular app config with following

angular.module('app', ['ngCookies'])
   function($httpProvider, $interpolateProvider, $scope, $http) {
       $httpProvider.defaults.withCredentials = true;
       $httpProvider.defaults.xsrfCookieName = 'csrftoken';
       $['Content-Type'] = 'application/x-www-form-urlencoded';
   function($http, $cookies) {
       $['X-CSRFToken'] = $cookies.csrftoken;

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply