Handling CORS in Django REST Framework

If you are building applications with Django and modern front-end/JavaScript technologies such as Angular, React or Vue, chances are that you are using two development servers for the back-end server (running at the port 8000) and a development server (Webpack) for your front-end application.

When sending HTTP requests from your front-end application, using the browser's fetch API, the Axios client or the jQuery $.ajax() method (a wrapper for the JavaScript XHR interface), to your back-end API built with Django REST framework the web browser will throw an error related to the Same Origin Policy.

Cross Origin Resource Sharing or CORS allows client applications to interface with APIs hosted on different domains by enabling modern web browsers to bypass the Same origin Policy which is enforced by default.

CORS enables you to add a set of headers that tell the web browser if it's allowed to send/receive requests from domains other than the one serving the page.

You can enable CORS in Django REST framework by using a custom middleware or better yet using the django-cors-headers package

Using a Custom Middleware

First create a Django application:

python manage.py startapp app

Next you need to add a middleware file app/cors.py:

class CorsMiddleware(object):
    def process_response(self, req, resp):
        response["Access-Control-Allow-Origin"] = "*"
        return response

This will add an Access-Control-Allow-Origin:* header to every Django request but before that you need to add it to the list of middleware classes:

MIDDLEWARE_CLASSES = (
    #...
    'app.CorsMiddleware' 
)

That's it you have now enabled CORS in your Django backend. You can configure this middlware to add more fine grained options or you can use the well tested package django-cors-headers which works great with Django REST framework.

Using django-cors-headers

Start by installing django-cors-headers using pip

pip install django-cors-headers

You need to add it to your project settings.py file:

INSTALLED_APPS = (
    ##...
    'corsheaders'
)

Next you need to add corsheaders.middleware.CorsMiddleware middleware to the middleware classes in settings.py

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

You can then, either enable CORS for all domains by adding the following setting

CORS_ORIGIN_ALLOW_ALL = True

Or Only enable CORS for specified domains:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    'http//:localhost:8000',
)

You can find more configuration options from the docs.

Conclusion

In this tutorial we have seen how to enable CORS headers in your Django REST framework back-end using a custom CORS middleware or the django-cors-headers package.