Reputation: 1851
While I was working in local everything worked perfectly, now I uploaded to a hosting and the fonts are being blocked by something I've never heard of (CORS). The fonts (and css, js, etc) are in a subdomain because urls are parsed by the index (so paths are not working in the domain). The css/js are working ok.
This is the output in the web console (firefox):
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Oxygen-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Oxygen-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Oxygen-Regular.ttf styles.css:10:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Montserrat-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Montserrat-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Montserrat-Regular.ttf styles.css:6:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff2 bootstrap.css:267:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff bootstrap.css:267:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.ttf bootstrap.css:267:12
I searched for this problem but i cannot find this especific problem with fonts and the exact error message.
EDIT:
The fix is to enable the header for the domain / folder serving the files. The config can be either in the virtual host block or in a .htaccess file (in the folder where the files are). I prefer setting it in the vhost block:
<IfModule mod_headers.c>
SetEnvIf Origin "https://(www|sub1|sub2|sub3).domain.com$" ACAO=$0
Header set Access-Control-Allow-Origin "%{ACAO}e" env=ACAO
Header set Access-Control-Allow-Methods "GET"
</IfModule>
In this example, the Access-Control-Allow-Origin
will only send the header for the whitelisted domain and subdomains. I redirect from domain.com
to www.domain.com
so this example won't accept a domain without www
.
Upvotes: 38
Views: 82026
Reputation: 951
In my case I had a Laravel application that had an environmental parameter "ASSET_URL" which was pointing to a subdomain, inside .env, I commented that out (by adding # sign at the beginning of the line) and CORS went away!
#ASSET_URL=https://dev.mysite.com
Upvotes: 1
Reputation: 568
I found a easy solution that works for me in Apache cPanel.
Just put the code in the .htaccess
file.
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
Upvotes: -2
Reputation: 29
Read Tons of Articles About Why GLYPHICON Was Not Showing Up...
"How to fix Access-Control-Allow-Origin (CORS origin) Issue for your HTTPS"
And They ALL Had Super Complicated Ways To Try And Fix... What In My Case... Was A SUPER SIMPLE Solution.
My HTML Code When Glyphicon Not Showing...
<link href="https://www.Example.com/css/ss.css" rel="stylesheet">
<link href="https://www.Example.com/css/bootstrap.min.css" rel="stylesheet">
SOLUTION :
I Simply REMOVED The www. From The URL For My CSS & Bootstrap Files...
<link href="https://Example.com/css/ss.css" rel="stylesheet">
<link href="https://Example.com/css/bootstrap.min.css" rel="stylesheet">
And Instantly The GLYPHICON Appeared On My Page!
Hope It's That Simple For You TOO!!
Upvotes: -4
Reputation: 460
You can do two thing either allow CORS or point to same hosting location as that of domain.
Upvotes: 0
Reputation: 2940
lighttpd allows you to add a custom header for all requests by adding this in a given context:
setenv.add-response-header = ( "Access-Control-Allow-Origin" => "*" )
For this to work, you must enable the
mod_setenv
. But if you don’t enable this module, before you enable yourmod_status
module, you will never see the custom headers come out of your lighttpd HTTP response header output
Upvotes: -3
Reputation: 10973
Your browser is complaining about a missing header: Access-Control-Allow-Origin
Because this header is missing your browser does not know that the desired access is legit. Have a look at http://enable-cors.org and choose the configuration appropriate for your server.
You need to configure the server where the fonts are stored !
Upvotes: 22