After enabling authentication in my Django backend and logging in a user all POST Requests stop to work and only respond with "403 Forbidden".
I setup a Django App as my backend and I use ReactJS as my Frontend.
All the basics work fine so far.
But now I want to add authentication to my project.
For this I have installed django-cors-headers
.
I have also included corsheaders
in my INSTALLED_APPS
.
CORS_ALLOWED_ORIGINS
allows http://localhost:3000
(the port my Frontend is running under).
CORS_ALLOW_CREDENTIALS
is also set to TRUE
.
The corresponding middleware corsheaders.middleware.CorsMiddleware
has also been added to the MIDDLEWARE
section.
I created three APIs. One each for registering a new user, for logging in an existing user and for logging out a user. All three of them work perfectly fine as long as no user is logged in. The cookies csrftoken
and sessionid
are set just as they should.
Now for my problem:
As soon as a user is logged in all POST APIs - including the three mentioned above - stop to work. I get a simple "403 Forbidden" response. GET APIs seem to work just fine. My research suggest that this is a common error that has something todo with the csrftoken
, yet I can't seem to get it to work, even after multiple evenings of working on this and trying everything that I could find.
I think I narrowed it down to own specific issue, even though I don't know if this is really is the problem. When I test the APIs not by using them in my React frontend but instead use the frontend that is included with Django to test the APIs they all work just fine, with or without a logged in user.
So I compared both requests in the Network task window of my browser (Firefox) and there is only one difference I could find. Both requests obviously send the csrftoken
cookie. Both also send the X-CSRFToken
header, but the value for the header is different for both requests. In the request I send through React the value for the X-CSRFToken
header is the same as the value of the csrftoken
. In the request through the Django Frontend the value for the X-CSRFToken
header is different from the value for the csrftoken
cookie.
However I cant seem to figure out why that is and if this even is the root of my problem.
As an additional information: I use axios for my HTTP-Requests. For this I included the following lines of code:
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
Im at my wits end, no solution I could find on Google or even with Chat-GPTs help seems to solve my problem. So here hoping someone can point out my mistake for me.
Try with this config
DEBUG = True
ALLOWED_HOSTS = ["*"]
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders', # <-------- this
'myapp',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware', # <-------- this
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'sales_company_app.get_user_instance.RequestMiddleware',
]
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework.authentication.TokenAuthentication',
),
}
CORS_ORIGIN_ALLOW_ALL = True # <-------- this
CORS_ALLOWED_ORIGINS = [
"http://localhost:3000", # React (FrontEnd Url) # <-------- this
]
CORS_ALLOW_HEADERS = '*' # <-------- this
CSRF_TRUSTED_ORIGINS = ["http://192.168.1.155:8000/"] # (Api Base Url) <-------- this (allow csrf_token) for doing whitelist