How can I set "Access-Control-Allow-Origin" headers for fontawesome's new CDN on Google Cloud Platform?

4
votes

Fontawesome just released their own CDN and I am trying to use it on my Google Cloud's AppEngine like this:

<script src="https://use.fontawesome.com/aa2b8cb467.js"></script>

But it gives the following error in Chrome's console:

"Font from origin 'http://use.fontawesome.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access."

I read on another Stackoverflow article that I can configure my app.yaml to set these headers, but I don't know how to set these for external fonts.

handlers:
- url: /fonts
  static_dir: fonts
  http_headers:
    Access-Control-Allow-Origin: "*"

I tried the following, but it doesn't work:

handlers:
- url: /use.fontawesome.com
  static_dir: ??
  http_headers:
    Access-Control-Allow-Origin: http://www.practia.org

And then I am thinking that it is not my application that needs to set these headers, but rather the CDN of fontawesome. If I understand, it is they who need to allow access from other origins to their CDN. Or am I missing something?

The only options that can be set on cdn.fontawesome.com

1
google-app-enginefont-awesomecdnapp.yaml

1 Answers

1
votes

You can not set Access-Control-Allow-Origin on other sites, just on your own.

As you are requesting the file from https://use.fontawesome.com/ it obviously is not your server.

It seems they are providing an unique file for each website https://use.fontawesome.com/aa2b8cb467.js - so I guess there should be a setting on their side that specifies allowed sites.

Probably you are suing it from the wrong host - check your setting on https://cdn.fontawesome.com/.