CODEWITHSUNDEEP
djangogoogle-chromecors
Admin Consulmet
Admin Consulmet

Reputation: 51

CORS error on Chrome with Google Fonts

With a recent upgrade of Chrome, I get the following error:

Font from origin 'http://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://example.com' is therefore not allowed access.

when calling the following from my html template in Django:

<link title="fonts" href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet" type="text/css">

I realise this is a CORS issue (it works perfectly on Safari which does not enforce CORS on fonts) so have installed django-cors-headers, and allowed all hosts but the error persists. This is my only CORS issue and rather frustrating as the app has worked perfectly on Safari and Chrome (the only browsers that we use) for months!

Any help would be most appreciated.

Upvotes: 4

Views: 5819

Answers (1)

Salva Carri&#243;n
Salva Carri&#243;n

Reputation: 540

Depending on the case, there are a few ways to fix this problem but I think these three are the most common solutions:

1. [Google Cloud] Configuring CORS on a Bucket

gsutil cors set cors-json-file.json gs://example

where cors-json-file.json is a your CORS configuration file:

[
    {
      "origin": ["http://example.appspot.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

More: https://cloud.google.com/storage/docs/cross-origin

2. [Nginx] Force Access-Control-Allow-Origin

Go to /etc/nginx/sites-available/[your_server_config] and add this line into your server block:

add_header Access-Control-Allow-Origin *;

More: https://serverfault.com/questions/162429/how-do-i-add-access-control-allow-origin-in-nginx

3. [Django-cors] Adds CORS headers to Django responses.

Check this out:

Upvotes: 2

Related Questions