Font from origin 'https://storage.googleapis.com' has been blocked from loading by Cross-Origin Resource Sharing policy

Question

Background

I am running Google App Engine with Python using Flask.
I am calling certain web assets in Google Cloud Storage buckets via https://storage.googleapis.com/*

I can verify the Access-Control-Allow-Originheader is being set on the request, as per the evidence below.

Problem

How is it then that I still get the following error in my browser (chrome).

Font from origin 'https://storage.googleapis.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:8080' is therefore not allowed access.

Code

I am using the Flask Snippet "Decorator for the HTTP Access Control", to set origins as below:

@admin_articles_routes.route('/xxx/xxx/xxx-xx')
@crossdomain(origin="*")
@authenticate_admin
def edit_article():

-------- Edit-----------

Curl response
Vinays-MacBook-Pro:App-Engine vinay$ curl -version http://localhost:8080/xxxx/xxxx/xxxx-xxxx?ID=ahlkZXZ-Y2ZjLW1lbGJvdXJuZS13ZWJzaXRlcjbGUYgICAgICAgAoM
*   Trying ::1...
* connect to ::1 port 8080 failed: Connection refused
*   Trying 127.0.0.1...
* Connected to localhost (127.0.0.1) port 8080 (#0)
> GET /xxx/xxxx/xxxx-xxxxx?ID=ahlkZXZ-Y2ZjLW1lbGJvdXJuZS13ZWJzaXRlcjELEgdBcnRpY2xlIhBBcnRpY2xlR3JhZHBhS2V5DAsSB0FydGljbGUYgICAgICAgAoM HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.43.0
> Accept: */*
> Referer: rsion
> 
< HTTP/1.1 302 Found
< access-control-max-age: 21600
< location: http://localhost:8080/_ah/login?continue=http%3A//localhost%3A8080/xxxx/xxxxx/xxxx-xxxxx%3FID%3DahlkZXZ-Y2ZjLW1lbGJvdXJuZS13ZWJzbGUYgICAgICAgAoM
< access-control-allow-origin: *
< access-control-allow-methods: HEAD, GET
< content-type: text/html; charset=utf-8
< Cache-Control: no-cache
< Expires: Fri, 01 Jan 1990 00:00:00 GMT
< Content-Length: 575
< Server: Development/2.0

I see `access-control-allow-origin` but not `Access-Control-Allow-Origin` — Igor Artamonov, Sep 26 '15 at 13:46
The snippet code has the value in caps. h['Access-Control-Allow-Origin'] = origin — Vinay Joseph, Sep 26 '15 at 14:07
so you mean that this image of response with headers is fake? can you show a real one instead then? — Igor Artamonov, Sep 26 '15 at 14:19
I don't think its fake. I think its lower case. The codebase has the header in camel case. — Vinay Joseph, Sep 26 '15 at 14:27
but on image it's not in camel case, is it real image with real headers or not? — Igor Artamonov, Sep 26 '15 at 14:48
ok, then put curl response instead. current image is misleading. — Igor Artamonov, Sep 26 '15 at 15:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/90687/discussion-between-vinay-joseph-and-igor-artamonov). — Vinay Joseph, Sep 26 '15 at 15:22
As you see, you curl show lowercase fields. But I just found in RFC that *field names a case-insensitive*. I didn't know that. So you can ignore my comments, sorry about this. Also, Chrome doesn't support `localhost` for `CORS`, but there should be different error message at this case — Igor Artamonov, Sep 26 '15 at 15:41
The CORS headers need to be on the font URL, not that of the page that's loading it. — Greg, Sep 26 '15 at 16:37
As this is an old post without an answer, I ask that you post the solution that worked for you as an official answer. If Greg's previous solution did not work for you, and you are still seeing the issue, I ask that you provide more information. — Jordan, Jan 05 '17 at 20:25

score 0 · Answer 1 · edited May 23 '17 at 11:54

This is a Community Wiki post of the last answer provided by Greg.

The CORS Access-Control-Allow-Origin header should be returned by the host server that is accepting the request, as it is the server that sets the rules for who can access its own resources.

The CORS OPTIONS preflight headers are to be set by the requester who is making the request, so that it properly identifies itself to the host server.

For more information, you can see this additional Stack Overflow post.

Font from origin 'https://storage.googleapis.com' has been blocked from loading by Cross-Origin Resource Sharing policy

1 Answers1