2 years ago
#75689
Adrian
Django - font awesome - problem with Access-Control-Allow-Origin
I have an app that stores media and static files on Azure Storage Account. I've successfully deployed the code and everything works fine except icons on admin page. As you can see below I am using jazzmin theme. All icons worked perfectly fine until I run collectstatic
and moved them to storage account.
When running colectstatic
I get the following output:
Found another file with the destination path 'admin\js\cancel.js'. It will be ignored since only the first encountered file is collected. If this is not what you want, make sure every static file has a unique path.
Found another file with the destination path 'admin\js\popup_response.js'. It will be ignored since only the first encountered file is collected. If this is not what you want, make sure every static file has a unique path.
1546 static files copied.
However when openining console on admin page I see the following errors:
127.0.0.1/:1163 Access to font at 'https://mywebsite.blob.core.windows.net/static/vendor/fontawesome-free/webfonts/fa-regular-400.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.
fa-regular-400.woff2:1 Failed to load resource: net::ERR_FAILED
127.0.0.1/:1179 Access to font at 'https://mywebsite.blob.core.windows.net/static/vendor/fontawesome-free/webfonts/fa-regular-400.woff' 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.
fa-regular-400.woff:1 Failed to load resource: net::ERR_FAILED
127.0.0.1/:1 Access to font at 'https://mywebsite.blob.core.windows.net/static/vendor/fontawesome-free/webfonts/fa-regular-400.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.
fa-regular-400.ttf:1 Failed to load resource: net::ERR_FAILED
127.0.0.1/:1 Access to font at 'https://mywebsite.blob.core.windows.net/static/vendor/fontawesome-free/webfonts/fa-solid-900.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.
fa-solid-900.woff2:1 Failed to load resource: net::ERR_FAILED
127.0.0.1/:1 Access to font at 'https://mywebsite.blob.core.windows.net/static/vendor/fontawesome-free/webfonts/fa-solid-900.woff' 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.
fa-solid-900.woff:1 Failed to load resource: net::ERR_FAILED
127.0.0.1/:1 Access to font at 'https://mywebsite.blob.core.windows.net/static/vendor/fontawesome-free/webfonts/fa-solid-900.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.
fa-solid-900.ttf:1 Failed to load resource: net::ERR_FAILED
My settings.py file looks like this:
INSTALLED_APPS = [
'jazzmin',
'django.contrib.admin',
'corsheaders',
...
]
MIDDLEWARE = [
...
"corsheaders.middleware.CorsMiddleware",
"django.middleware.common.CommonMiddleware",
]
DEBUG = False
ALLOWED_HOSTS = ['127.0.0.1', '127.0.0.1:8000', 'mywebsite.com']
CORS_ORIGIN_ALLOW_ALL = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
I installed django-cors-headers and followed the instructions that are here.
All images are correctly displayed everywhere. The issue is only with font awesome on admin site. All fonts from fontawesome are working fine on other sites.
Please let me know what I am missing here. I tested all answers that are here.
python
django
azure
azure-blob-storage
0 Answers
Your Answer