Common cors-headers problems even after reading the docs

Using Django Deployment
1

I’m having similar problems to many people with cors-headers but despite reading lots of stackoverflow and the project docs I can’t get it to work :frowning:

To start with, I am running

Django==4.2.5
django-cors-headers==4.2.0

The problem is simple, when I attempted to add <link rel="manifest" href="{% static 'site.webmanifest' %}"> to one of my files to access a static file, I get a cors header error when chrome reaches this line: “Ensure CORS response header values are valid”. The file is stored on GCP storage <link rel="manifest" href="https://storage.googleapis.com/mydirectory/site.webmanifest">

So I know that I am supposed to be able to solve this by allowing google storeage as a valid origin in my settings.py when I configure django-cors-headers… however even if I just brute force it for debugging and allow all I still get the same error :frowning:

So in settings.py I have:

CORS_ALLOW_ALL_ORIGINS = True  # debugging only obviously

# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.humanize',
    'bootstrap5',
    'easy_thumbnails',
    'properties',
    'django_extensions',
    'corsheaders',
]


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

I am baffled why CORS_ALLOW_ALL_ORIGINS=True doesn’t work since I have corsheaders as my very first middleware item and corsheaders is listed in our installed apps. So it seems like I’ve done the standard stuff, but when I deploy to app engine and test it out nothing changes no matter what I do.

Help?

1 Like
2

You are getting CORS error becuase your file is stored at GCP storage and you have to allow your host from GCP storage itself, not from your Django BE. In your GCP storage settings you can see something related CORS you can add your hosts to that part.

3

Could you elaborate on this? I thought that the points of cors was that if I needed to have requests between my domain and the google storage domain I’d put both of them in the allowed origins. Here I’m using CORS_ALLOW_ALL_ORIGINS=True… isn’t this the most permissive setting? What more do I need beyond this?

4

Thanks for your reply, I got it. I was looking at the cors backwards: I thought my app needed to list the bucket, but the headers from the bucket reply needed to list my app.

In case anyone else has a similar issue, here is the link to what I did https://cloud.google.com/storage/docs/using-cors

5

You are somewhere correct, the thing is when you serve requests via your server (i.e where you have deployed your BE) you add allowed hosts to settings.py
But if you look at the scenario where you are serving your files request from cloud (i.e google storage) than it is also some sort of server which serves the requests which client (browser) is asking for and in order to serve the request google storage server also asks for the CORS allowed origin.