[Solved] CORS policy error when connecting frontend frameworks to Django

When trying to integrate frontend frameworks to Django you usually face an error.Which says something like the following :

Access to XMLHttpRequest at 'http://localhost:8000/" from orgin 'http://localhost:8080' has been blocked by CORS policy: Request header field access-control-allow-orgin is not allowed by Access-Control-Allow-Headers in preflight response

This error is due to the CORS policy in Django. To resolve this issue you will have to do the following :

  1. First install django CORS headers via PIP using the following command.

pip install django-cors-headers

2. Add corsheaders to installed apps inside your settings.py

INSTALLED_APPS = [ 'corsheaders']

3. Add CORS to Django Middle wares in settings.py

MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware']

4. Now to the end of the settings.py file your have to add the following lines

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = False
CORS_ALLOW_HEADERS = ['*']

This will solve your issue with CORS issue when connecting Django with frontend frameworks.