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
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>
.