Firebase "Access to Font" error

Question

This may be an oversight but I'm using firebase and set up the firebase.json file which is a mixture of auto-generation and copying the headers block from Firebase's documentation. The issue is, my fonts refuse to allow me access even though my file looks like this:

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "ignore": [
    "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source" : "**/*.@(eot|otf|ttf|ttc|woff)",
        "headers" : [{
          "key" : "Access-Control-Allow-Origin",
          "value" : "*"
        }]
      }, {
        "source" : "**/*.@(jpg|jpeg|gif|png|svg)",
        "headers" : [{
          "key" : "Cache-Control",
          "value" : "max-age=7200"
      }]
    }]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

This is the CORS error I'm getting:

Access to Font {Firebase font url}. {Firebase font url} from origin {Firebase project url} has been blocked by CORS policy. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin {Firebase project url} is therefore not allowed access.

Side note: I have an images folder in which I am able to load those just fine. Is there something about fonts that require more attention?

Please don't show images of code and errors. It's far better to copy the text into the question so it's easy to read and search. — Doug Stevenson, Mar 19 '18 at 17:26

score 0 · Answer 1 · answered Mar 21 '18 at 08:27

0

Firebase rolled out a new feature/tool that forces users to update the CORS settings for Google Storage. I found the answer on this StackOverflow question. Firebase Storage and Access-Control-Allow-Origin

answered Mar 21 '18 at 08:27

Martavis P.

1,708
2
27
45

Firebase "Access to Font" error

1 Answers1