Django google bucket No 'Access-Control-Allow-Origin'

Using Django
1

Hello guys i have a problem. I don’t know how to describe my problem but let me explain my project first. I have a simple project and i’m using google cloud sql for static and media files (And i’ll deploy on google). And before i move my static files to google cloud sql everything was good but now i have this error (30+ error):
(index):1 Access to font at ‘https://storage.googleapis.com/static/Fonts/jost/Jost-400-Book.ttf’ 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.

And after little bit search i find django-cors-headers and i fallowed what their intrudction said. here’s my settings codes:

ALLOWED_HOSTS = ['*']
CORS_ORIGIN_ALLOW_ALL = True
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 = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.locale.LocaleMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
...
STATIC_URL = 'https://storage.googleapis.com/{}/'.format(GS_STATIC_BUCKET_NAME)
STATIC_ROOT = "static/"
MEDIA_URL = 'https://storage.googleapis.com/{}/'.format(GS_MEDIA_BUCKET_NAME)
MEDIA_ROOT = 'media/'

I hope someone can help me because i don’t even know what cors is.

2

CORS is Cross-Origin Resource Sharing. It’s a browser protection that prevents websites from accessing files from across different domain names. It’s meant to be a protection to prevent malicious users from doing some sneaky things on the internet.

In this case, I believe the problem is not with your Django configuration. I believe the problem is that you’re site is trying to access files from Google that it doesn’t have permission to do so. With Google fonts, I believe you’re not allowed to access the TTF files directly. Google provides links that you add to your header to get the font you want.

Here’s the code snippet I found on the Google Font sight for Jost 400:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jost&display=swap" rel="stylesheet">

Here’s the URL I got it from: Google Fonts

I hope that helps!

1 Like
3

Thank you man some of my errors gone but there are some errors still here for ex:
Access to script at ‘https://storage.googleapis.com/denka_metal_static_bucket/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.

4

The problem you’re showing now is the same exact kind of problem. Your localhost site is trying to access files from googleapis.com. You can’t do that because the site is crossing domains, and the browser is telling you that.

It looks like you’re trying to access Django debug toolbar static files. I’d guess that you’re static files are pointing at an incorrect place for local development. Maybe you need to check on STATIC_URL.

1 Like
5

Thanks man and i think this night will be long for me. And also if someone wants to add something, i’m here to listen