CODEWITHSUNDEEP
reactjsdjangodjango-rest-frameworkaxiosdjango-cors-headers
Saif
Saif

Reputation: 502

Django CORS requests creating 403 Forbidden Error only on server

I have an application which uses Django for the backend and react for the frontend so I setup django-cors-headers. When I tested the application locally with the settings I added, I had no issues. But I deployed to my server, I kept getting 403 error on API requests (except GET requests).

Below is my settings.py file (only the relevant settings):

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '<my-secret-key>'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['<my-server-ip>']

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'frontend',
    'services',
    'rest_framework',
    'dj_rest_auth',
    'rest_framework.authtoken',
    'user',
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]


STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATIC_URL = '/static/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

MEDIA_URL = '/media/'

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.TokenAuthentication',
    )
}

CORS_ALLOWED_ORIGINS = [
    "http://<my-server-ip>:8000",
    "http://localhost:8000",
    "http://127.0.0.1:8000",
    "http://0.0.0.0"
]

CSRF_TRUSTED_ORIGINS = [
    "http://<my-server-ip>:8000",
    "http://localhost:8000",
    "http://127.0.0.1:8000",
    "http://0.0.0.0"
]

CORS_ALLOW_CREDENTIALS = True

I make the API requests from React using axios in the form axios.post('http://:8000/api-endpoint', body, config) with then and catch blocks.

The specific errors that I am getting are:

xhr.js:177 POST http://<my-server-ip>:8000/api/auth/login/ 403 (Forbidden)

and

createError.js:16 Uncaught (in promise) Error: Request failed with status code 403
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

Upvotes: 0

Views: 1716

Answers (1)

Saif
Saif

Reputation: 502

Thanks to dbuchet, I found that the problem here was not CORS, rather the fact that in my settings.py file, I had both session and token authentication listed as the default authentication classes - removing the session authentication class fixed the problem I was having.

Upvotes: 1

Related Questions