Django, google app engine, bucket No 'Access-Control-Allow-Origin'

Question

Hello i've a problem that i can't solve. Now i've a simple django project and i'm close to finishing. a few days ago i upload my static files and media files to google cloud sql-bucket. Normally everything was fine for media files but when i upload static files something started to happens. Here some of error messages(30+):

Access to script at 'https://storage.googleapis.com/blablabla/debug_toolbar/js/toolbar.js' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://storage.googleapis.com/blablabla/debug_toolbar/js/toolbar.js net::ERR_FAILED
Access to font at 'https://storage.googleapis.com/blablabla/Fonts/jost/Jost-500-Medium.woff2' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Also normally django wasn't accept my static files because of they are in somewhere else but i loaded django-cors-headers (i don't know is it full name.) and django accept most of css docs. Here is my settings.py (I cut some parts when i paste here):

ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
    'honeypot',
    'ckeditor',
    'ckeditor_uploader',
    'modeltranslation',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'Product.apps.ProductConfig',
    'captcha',
    'admin_honeypot',
]
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.locale.LocaleMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsPostCsrfMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = (
    'http://127.0.0.1:8000',
    'http://localhost:8000',
    'https://storage.googleapis.com',
    'https://googleapis.com',
)
CSRF_TRUSTED_ORIGINS = [
    'http://127.0.0.1:8000',
    'http://localhost:8000',
    'https://storage.googleapis.com',
    'https://googleapis.com',
]

But my problem starting here. For example i've 4 css and also for example in my first css(theme.css) there is line like this:

@font-face {
  font-family: "Jost";
  font-weight: 600;
  src: url(https://storage.googleapis.com/blablabla/Fonts/jost/Jost-600-Semi.woff2) format("woff2"), url(https://storage.googleapis.com/blablabla/Fonts/jost/Jost-600-Semi.woff) format("woff"), url(https://storage.googleapis.com/blablabla/Fonts/jost/Jost-600-Semi.ttf) format("truetype"); }

or at toolbar.js in debug-toolbar docs

import { $$, ajax } from "./utils.js";

Also all my css and font files are in same google bucket. And my site accept css docs but not accept inner references like i pasted up. And i don't know where is the error. I searched everywhere but i can't find any solution. I hope someone can help me. And i think this error not because of django, it may because of google

Answer 1

It seems to be a matter of configuring CORS. I think it's quite well explained in in Google Documentation.

In shortcut you need to configure bucket cors with gcloud, REST API or your proffered programming language libraries (examples in the documentation). GCS will add Access-Control-Allow-Origin header if you set up origin

Functionality of origin header is described quite well here:

If the origin in a browser's request matches an origin in your CORS configuration, Cloud Storage returns Access-Control-Allow-Origin to the browser. If there is no match, Cloud Storage does not include Access-Control-Allow-Origin in the response. You can supply a wildcard value that grants access to all origins: <Origin>*</Origin>.