38

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.

10
  • Just google how to set the mentioned header with your web server and you are done
    – Marged
    Commented Oct 18, 2015 at 12:11
  • Sorry, what header? Is the first time I have this problem and I'm lost :(
    – Chazy Chaz
    Commented Oct 18, 2015 at 12:18
  • 1
    Access-control-allow-origin, it is shown in the error message. Have a look at enable-Cors.org or use your favorite search engine
    – Marged
    Commented Oct 18, 2015 at 12:20
  • 1
    The Edit you made to the question, Adding Header to .htaccess file helped me a lot Commented Dec 28, 2016 at 16:46
  • 1
    Do you have extra closing parenthesis in your answer? It should be SetEnvIf Origin "https://(www|sub1|sub2|sub3).domain.com$" ACAO=$0 shouldn't it?
    – martin
    Commented Feb 3, 2022 at 16:58

6 Answers 6

22

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 !

4
  • I've tried adding headers (see edited) in .htaccess with no luck. About the conf files, I don't know how to access them from the kloxo panel, I've been searching but nothing. Also tried header("Access-Control-Allow-Origin: *"); at the beginning of the index.php file.
    – Chazy Chaz
    Commented Oct 18, 2015 at 13:17
  • Show us a trace of the communication, it can be reached by pressing F12 and going to network. There you should see the headers if your config is correct.
    – Marged
    Commented Oct 18, 2015 at 13:32
  • Ok, I was enabling the header in the domain root folder, not in the subdomain root folder... Thanks!
    – Chazy Chaz
    Commented Oct 18, 2015 at 13:35
  • @ChazyChaz your suggestion would terminate the CORS poliy entirely(which is not receommended) Commented Jun 16, 2020 at 8:11
1

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

You can do two thing either allow CORS or point to same hosting location as that of domain.

-2

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>
1
  • This allows to load from every domain on the internet and is a serious security issue! You should always specify the origins. Commented Apr 24, 2023 at 9:16
-3

Interesting gotcha:

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 your mod_status module, you will never see the custom headers come out of your lighttpd HTTP response header output

2
  • This allows to load from every domain on the internet and is a serious security issue! You should always specify the origins. Commented Apr 24, 2023 at 9:16
  • Unless they had a separate process just for that. Anyway, mentioned as a gotcha (I see link there broken), should have been a comment most probably Commented Apr 29, 2023 at 12:44
-4

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

4
  • 4
    Welcome to Stack Overflow. Thanks for taking the time to answer a question. All of the extra capitalization and exclamation points make your answer feel really intense.
    – Ben Norris
    Commented Aug 12, 2020 at 0:19
  • 2
    This answer was so simple and correct, I was compelled to log in to Stack Overflow for the first time in probably a decade, just to upvote it!
    – Dee
    Commented Jun 10, 2021 at 12:51
  • This solution did not help me. Thanks
    – Kamlesh
    Commented Jul 24, 2021 at 6:57
  • Wow that really helped me, thanks!
    – HOSSEIN B
    Commented Oct 15, 2024 at 13:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.