CORS "No Access Control Allow Origin Header" Present on requested resource Django/React/Gitpod

Question

I am in the process of working on a project with a React frontend, a Django backend, developing in gitpod. I believe that gitpod may be complicating this more than I'd expect.

Currently, I can confirm that I am able to run python manage.py runserver, then browse the Django Rest Framework via the api root.

I also have a Create-React_app frontend that is able to make requests to another API, but requests to my API returns only the error: "Access to fetch at 'https://8000-anthonydeva-sylvanlibra-8b5cu5lyhdl.ws-us107.gitpod.io/lineitem/' from origin 'https://3000-anthonydeva-sylvanlibra-8b5cu5lyhdl.ws-us107.gitpod.io' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

I know that django-cors-headers is the recommended solution for this based on what I have seen so far, but even after installing and setting this up in settings.py, the same error is showing up and my django server doesn't seem to be showing any updates for the failed requests.

My apologies if any needed information is missing. I'm pretty new to this and having a bit of trouble identifying what is unnecessary and what is helpful. I'm happy to share any additional information needed.

INSTALLED_APPS = [
    'corsheaders',
    # 'django_filters',
    'library.apps.LibraryConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
]

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',
]

# CORS_ALLOWED_ORIGINS = [
#     'https://3000-anthonydeva-sylvanlibra-37g1pm5kjx9.ws-us107.gitpod.io',
# ]

CORS_ALLOW_ALL_ORIGINS = True 

CORS_ORIGIN_ALLOW_ALL = True #I have seen both of these, so I tried both

# CORS_ORIGIN_WHITELIST = [
#     'https://3000-anthonydeva-sylvanlibra-8b5cu5lyhdl.ws-us107.gitpod.io/'
# ]

ALLOWED_HOSTS = [ '*' ]

CORS_ALLOW_HEADERS = [ '*' ]

CSRF_TRUSTED_ORIGINS = [ 'https://***.gitpod.io' ] 

ROOT_URLCONF = 'sylvan.urls'

CORS_ALLOW_CREDENTIALS = False


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

Answer 1

Try this in your settings.py

CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOWED_ORIGINS = [
      "http://localhost:3000",
]