From my frontend http://127.0.0.1:5500/index.html I am calling Django REST POST API http://127.0.0.1:8000/api. I have installed django-cors-headers and my frontend’s image_upload.js, backend’s settings.py, and views.py, project level urls.py and app level urls.py are as follows, API is working in postman but I am getting CORS error in chromes console,
Chrome console
Django console
image_upload.js
const image_input = document.querySelector("#image_input");
const display_image = document.querySelector("#display-image");
image_input.addEventListener("change", (event) => {
console.log(event.target.files[0]);
// console.log(URL.createObjectURL(event.target.files[0]));
display_image.src = URL.createObjectURL(event.target.files[0]);
const url = "http://127.0.0.1:8000/api";
const data = event.target.files[0];
axios
.post(url, JSON.stringify(data), {
method: "POST",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
});
settings.py
"""
Django settings for model project.
Generated by 'django-admin startproject' using Django 2.2.
For more information on this file, see
https://docs.djangoproject.com/en/2.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.2/ref/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 = 'pd^*8)+5$qr_q9(a+n)(meh22&m=0+qn7a^g8$#&)(+fv!1wgc'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = ['http://127.0.0.1:5500']
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# 3rd party
'rest_framework',
"corsheaders",
# Local
'apis.apps.ApisConfig',
]
REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.AllowAny',
],
}
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
"corsheaders.middleware.CorsMiddleware",
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
# CORS_ALLOWED_ORIGINS = [
# 'http://127.0.0.1:8000',
# ]
# CSRF_TRUSTED_ORIGINS = [
# 'http://127.0.0.1:8000',
# ]
ROOT_URLCONF = 'model.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'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 = 'model.wsgi.application'
# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/2.2/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/2.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
CORS_ORIGIN_ALLOW_ALL: True
# CORS_ALLOW_CREDENTIALS = True
# CORS_ALLOWED_ORIGINS = [
# 'http://127.0.0.1:8000/api/',
# 'http://127.0.0.1:5500',
# ]
CORS_ORIGIN_WHITELIST = [
'http://127.0.0.1:5500',
# 'http://127.0.0.1:8000',
]
# CORS_ALLOW_HEADERS = ['*']
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
views.py
from email import message
from tkinter import image_names
from django.shortcuts import render
from django.http.response import JsonResponse
from rest_framework.parsers import JSONParser
from rest_framework import status
from rest_framework.decorators import api_view
from tensorflow.keras.models import load_model
import urllib.request
# Create your views here.
@api_view(['GET', 'POST'])
def PostRequests(request):
print(request.body)
# ing_url = ''
# img_name = "tumor_image.jpg"
# img = urllib.request.urlretrieve(img_url,img_name)
# print(img)
# loaded_model = load_model("vgg16_model_with_90_acc.h5")
return JsonResponse({'message': "It Worked!"}, safe=False)
Project level urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('apis.urls')),
]
App level urls.py
from django.urls import path
from apis import views
urlpatterns = [
path('', views.PostRequests),
]
