3

I have a page with some text that has been given a font-family of constitution:

enter image description here

This font was downloaded from a foundary and is defined for the page with an @font-face: enter image description here

When the page renders, the browser goes out for the font but the request is blocked by a cancel and the text doesn't get the font-family applied:

enter image description here

Does anyone know what might be causing this cancel? This used to work, and I can't imagine what I did or what happened to break it.

Thanks for any help.

Steve
  • 4,534
  • 9
  • 52
  • 110
  • Is there any error reported in console? Is this `Constitution.ttf` deployed in a different domain? – shaochuancs Jul 03 '17 at 03:21
  • Yes! The error is: "Access to Font at https://example.com/fonts/Constitution.ttf from `http://example.com` has been blocked by CORS policy. The 'Access-Control-Allow-Origin' header contains multiple values: `http://example.com`, `https://example.com`, but only one is allowed. `http://example.com` is, therefore not allowed access." Thank you! What is the best way to fix this? – Steve Jul 03 '17 at 13:32
  • There should be only one `Access-Control-Allow-Origin` header with only one origin (or wildcard sign). I guess this is caused by accidentally add additional `Access-Control-Allow-Origin` header in the server configuration. Please check my answer. – shaochuancs Jul 03 '17 at 14:00

2 Answers2

3

The Access-Control-Allow-Origin header expect only one origin, or a wildcard (*).

The error you mentioned in the question's comment ("The 'Access-Control-Allow-Origin' header contains multiple values ... but only one is allowed") clearly indicates that there are multiple values in Access-Control-Allow-Origin header, or there are multiple Access-Control-Allow-Origin headers.

To fix the issue, there should be only one Access-Control-Allow-Origin header, with only one origin value.

As mentioned in the question: "This used to work". I guess this issue is caused by accidentally add additional Access-Control-Allow-Origin header in the server configuration.

For reference, please check the W3C specification:

A resource can have one Access-Control-Allow-Origin header defined. The header must match the following ABNF:

Access-Control-Allow-Origin = "Access-Control-Allow-Origin" ":" ascii-origin | "*"

ascii-origin = ASCII serialization of an origin

Community
  • 1
  • 1
shaochuancs
  • 15,342
  • 3
  • 54
  • 62
  • I fixed this with a mod_rewrite to send non-HTTPS requests to HTTPS. But I'm curuous how I would fix it if I wanted to allow HTTP and HTTPS access. I've never specified an Accedd-Control-Allow-Origin header in the code so how did this get set, and how can I modify it? Thanks – Steve Jul 03 '17 at 17:42
  • @Steve I guess `http://example.com` host the webpage. In that case, you only need to put `https://example.com` in the `Access-Control-Allow-Origin` header. If `https://example.com` host the webpage, then put `http://example.com` in the `Access-Control-Allow-Origin` header. Otherwise, just use `*`. – shaochuancs Jul 03 '17 at 23:12
  • If you've never specified `Access-Control-Allow-Origin` manually, my guess is: it is set by some module/plugin... – shaochuancs Jul 03 '17 at 23:13
1

  1. Put this inside your virtual host definition or .htaccess file:

    <FilesMatch ".(ttf|otf|woff|woff2|eot|ttc)$">
    Header set Access-Control-Allow-Origin "*"
    Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
</FilesMatch>

  2. Restart Apache web server

  3. Refresh the page multiple times (Hard Refresh)
Pang
  • 9,564
  • 146
  • 81
  • 122
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100