I'm building an app that works as follows:
- Users fill out data on an html form and submit.
- the data is posted onto the API (via Fetch).
This app uses django, django rest frame work with plain html and vanilla jav
My issue is that when the user is authenticated on the API/backend, I cannot post. It returns 403. However, when I am not authenticated I can post data from the form.
Here is the JS on the form.html that posts data into the API:
<script>
console.log('js linked')
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
console.log(csrftoken)
function post_report(event) {
event.preventDefault();
var contact_email = document.getElementById("contact_email").value
var contact_number = document.getElementById("contact_number").value
var date_time = document.getElementById("date_time").value
var location = document.getElementById("location").value
var description = document.getElementById("description").value
console.log(contact_email + ' ' + description)
fetch("http://127.0.0.1:8000/api/Flight_Safety_Reports/",{
method: "POST",
mode: 'same-origin',
headers:{
"Accept": "application/json",
'Content-Type':'application/json',
'X-CSRFToken': csrftoken
},
body: JSON.stringify({
contact_email:contact_email,
contact_number:contact_number,
date_time:date_time,
location:location,
description:description
})
})
.then(response =>console.log(response))
alert('report submitted')
}
</script>
views.py
from app_reports.models import (
FlightSafetyReport
)
from .serializers import (
FlightSafetyReportSerializer
)
class FlightSafetyReportViewSet(viewsets.ModelViewSet):
serializer_class = FlightSafetyReportSerializer
queryset = FlightSafetyReport.objects.all()
settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'crispy_forms',
'bootstrap4',
'rest_framework',
'corsheaders',
'articles',
'user_api',
'app_sandbox',
'django.contrib.sites',
'allauth',
'allauth.account',
'allauth.socialaccount',
'rest_auth',
'rest_auth.registration',
'rest_framework.authtoken',
]
MIDDLEWARE = [
'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',
'corsheaders.middleware.CorsMiddleware',
]
ROOT_URLCONF = 'djreact.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BUILD_DIR, BACKEND_TEMPLATES_DIR],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'djreact.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
REST_FRAMEWORK = {
# Use Django's standard `django.contrib.auth` permissions,
# or allow read-only access for unauthenticated users.
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.AllowAny',
]
}
CORS_ORIGIN_ALLOW_ALL = True
STATICFILES_DIRS = [os.path.join(BUILD_DIR,'static')]
CSRF_COOKIE_NAME = "XSRF-TOKEN"
To re-iterate, when I am not logged into the api / when I am not logged into django-admin I am able to post. When I am logged in, I get a 403 forbidden error.
question from:
https://stackoverflow.com/questions/66064761/post-to-django-api-returns-403-forbidden-when-authenticated-but-able-post-whe