CORS in Django REST Framework

Django REST Framework doesn't allow cross browser requests via AJAX. When we build a REST API it is usually exposed on a separate server and the applications using it have their own servers on which they run. Hence when we hit any of the REST URL via AJAX we get No 'Access-Control-Allow-Origin' header is present on the requested resource error. For instance,

Ext.Ajax.request({    
 url: 'http://localhost:8080/portal/categories',    
 method: 'GET',
 success: function(response){console.log(response)},
 failure: function(){console.log('failure');}
});

the above request, will result into following error.

XMLHttpRequest cannot load http://localhost:8080/portal/categories?_dc=1430698970456. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

This is because of no provision in the REST API to handle Cross-Origin-Resource-Request (CORS). To enable it in the REST API, we need django-cors-headers as recommended in Django REST Framework documentation. The minimal settings required are as follows.

Step 0 - install django-cors-headers,

>>> pip install django-cors-headers

Step 1 - In settings.py, add the following entry in INSTALLED_APPS tuple.

INSTALLED_APPS = (
 ...
 ...

 'corsheaders'
)

Step 2 - In settings.py, add the following entries at the top of MIDDLEWARE_CLASSES tuple.

MIDDLEWARE_CLASSES = (
 'corsheaders.middleware.CorsMiddleware',
 'django.middleware.common.CommonMiddleware',
 
 ...
 ...
) 

Step 3 - Add the following flag variable in settings.py

CORS_ORIGIN_ALLOW_ALL = True 

We are done !!

Now you can again make the AJAX request as given in the beginning of this post & you will get the response in success handler as follows.

{
 requestId: 7
 responseText: "[{"name":"Database","href":"/portal/categories/1/scripts"},{"name":"RFB","href":"/portal/categories/2/scripts"},{"name":"Info Miner","href":"/portal/categories/3/scripts"}]"
 responseXML: null
 status: 200
 statusText: "OK"
 
 ...
 ...
}

For more configuration options visit django-cors-headers.