[FIXED] Django Backend is giving me this Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'

Issue

I have tried just about everything from researching. Basically I have my frontend server and a backend server. My fronend server is getting the error from the backend server that is running Django.

This is my settings in my Django app

"""
Django settings for appliAI project.

Generated by 'django-admin startproject' using Django 4.2.7.

For more information on this file, see
https://docs.djangoproject.com/en/4.2/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.2/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


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

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'removed because I am not giving that out'

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

# asdf.com has is replacing my actual URL

ALLOWED_HOSTS = [
    "localhost",
    "127.0.0.1",
    "asdf.com",
    "*.asdf.com",
]

# Application definition

INSTALLED_APPS = [
    'corsheaders',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'sslserver',
    'django_extensions',
    'rest_framework',
]
# Access-Control-Allow-Credentials = 
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',
    
    # 'whitenoise.middleware.WhiteNoiseMiddleware',
]

CORS_ALLOWED_ORIGIN_REGEXES = [
    r"^https://\w+\.asdf\.com$",
]

CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_DEBUG = True
CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]


APPEND_SLASH=False

CORS_ALLOW_CREDENTIALS = False



ROOT_URLCONF = 'appliAI.urls_ssl'

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 = 'appliAI.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.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/4.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

SECURE_SSL_REDIRECT = True
CSRF_COOKIE_SECURE = True
SESSION_COOKIE_SECURE = True

SSL_CERTIFICATE_PATH = 'removed for security reassons'
SSL_PRIVATE_KEY_PATH = 'removed for security reassons'

Here is my front end post

axios.post(appliAiUrl + '/getPredictions',
 {
   "username"            : username,
   "company_code"   : company_code,
   "company_id" : company_id
 }
 )
 .then(response => response.data)
 .then(data => {
  processRecommendation(data);
 })

I have nginx setup as a reverse proxy server and I have this https://127.0.0.1:8000

I am running out of things to try and I really don't want to give access my server access to all.

I have tried just about basically everything I could think of to try to get this to work. Here is my nginx

       location / {
                proxy_pass https://127.0.0.1:8000;
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }

I thought by adding CORS_ALLOW_ALL_ORIGINS = True would get me to a state where it would work but I was wrong. I also really don't want to do that.

Error message

Access to XMLHttpRequest at 'appliai.asdf.com/getPredictions' from origin 'appli.asdf.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. xhr.js:220 POST appliai.asdf.com/getPredictions net::ERR_FAILED

I am running this temporarily until I can fix whatever is going on.

python3 manage.py runserver_plus --cert /etc/nginx/ssl/asdf_com/__asdf_com.crt --key /etc/nginx/ssl/asdf.key

2023-12-30 05:31:49.514533: I external/local_tsl/tsl/cuda/cudart_stub.cc:31] Could not find cuda drivers on your machine, GPU will not be used.
2023-12-30 05:31:50.203226: E external/local_xla/xla/stream_executor/cuda/cuda_dnn.cc:9261] Unable to register cuDNN factory: Attempting to register factory for plugin cuDNN when one has already been registered
2023-12-30 05:31:50.203517: E external/local_xla/xla/stream_executor/cuda/cuda_fft.cc:607] Unable to register cuFFT factory: Attempting to register factory for plugin cuFFT when one has already been registered
2023-12-30 05:31:50.397149: E external/local_xla/xla/stream_executor/cuda/cuda_blas.cc:1515] Unable to register cuBLAS factory: Attempting to register factory for plugin cuBLAS when one has already been registered
2023-12-30 05:31:50.859038: I external/local_tsl/tsl/cuda/cudart_stub.cc:31] Could not find cuda drivers on your machine, GPU will not be used.
2023-12-30 05:31:50.860671: I tensorflow/core/platform/cpu_feature_guard.cc:182] This TensorFlow binary is optimized to use available CPU instructions in performance-critical operations.
To enable the following instructions: AVX2 FMA, in other operations, rebuild TensorFlow with the appropriate compiler flags.
2023-12-30 05:31:52.648624: W tensorflow/compiler/tf2tensorrt/utils/py_utils.cc:38] TF-TRT Warning: Could not find TensorRT
Using TensorFlow backend
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on https://127.0.0.1:8000
Press CTRL+C to quit
 * Restarting with stat
Performing system checks...

2023-12-30 05:31:59.266727: I external/local_tsl/tsl/cuda/cudart_stub.cc:31] Could not find cuda drivers on your machine, GPU will not be used.
2023-12-30 05:32:00.448743: E external/local_xla/xla/stream_executor/cuda/cuda_dnn.cc:9261] Unable to register cuDNN factory: Attempting to register factory for plugin cuDNN when one has already been registered
2023-12-30 05:32:00.449008: E external/local_xla/xla/stream_executor/cuda/cuda_fft.cc:607] Unable to register cuFFT factory: Attempting to register factory for plugin cuFFT when one has already been registered
2023-12-30 05:32:00.709272: E external/local_xla/xla/stream_executor/cuda/cuda_blas.cc:1515] Unable to register cuBLAS factory: Attempting to register factory for plugin cuBLAS when one has already been registered
2023-12-30 05:32:01.259375: I external/local_tsl/tsl/cuda/cudart_stub.cc:31] Could not find cuda drivers on your machine, GPU will not be used.
2023-12-30 05:32:01.270345: I tensorflow/core/platform/cpu_feature_guard.cc:182] This TensorFlow binary is optimized to use available CPU instructions in performance-critical operations.
To enable the following instructions: AVX2 FMA, in other operations, rebuild TensorFlow with the appropriate compiler flags.
2023-12-30 05:32:03.106345: W tensorflow/compiler/tf2tensorrt/utils/py_utils.cc:38] TF-TRT Warning: Could not find TensorRT
Using TensorFlow backend
System check identified no issues (0 silenced).

Django version 4.2.7, using settings 'asdf.settings'
Development server is running at https://[127.0.0.1]:8000/
Using the Werkzeug debugger (https://werkzeug.palletsprojects.com/)
Quit the server with CONTROL-C.
 * Debugger is active!
 * Debugger PIN: 479-017-511

When I try to hit the API nothing appears when I should see something like this

1/1 [==============================] - 0s 72ms/step
1/1 [==============================] - 0s 23ms/step

Solution

Well after a lot of back and forth trying to get something to work, in the end it was a combination of Nginx and Gunicorn (HTTP vs HTTPS).

When running the Django app via Gunicorn it listens on HTTP by default, not HTTPS. I needed a way to pass in a proxy so that the URL I would use to hit the API would use HTTPS not HTTP.

Nginx configuration:

server {
        listen 443 ssl;
        server_name     www.test.com;
        root         /var/www;


        ssl_certificate_key /etc/nginx/ssl/test.key;
        ssl_certificate /etc/nginx/ssl/test_com/__test_com.crt;
        index index.html index.htm index.nginx-debian.html;

        location / {
                proxy_pass http://localhost:8000;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }
}

There was one Django setting that I needed to change and that was in the allowed hosts.

ALLOWED_HOSTS = [ "localhost", "127.0.0.1", "*.test.com", "asdf.test.com", ]

I had to specify the actual subdomain. Just having *.test.com did not work at all.

Answered By - Tyler Pranger