Chrome浏览器中使用Google字体时出现CORS错误

Question

最近Chrome浏览器升级后，我遇到以下错误：

字体源http://storage.googleapis.com的字体由于跨域资源共享策略被拦截：请求的资源未包含任何“Access-Control-Allow-Origin”头字段。因此，源http://example.com无法访问。

当我在Django的HTML模板中调用以下内容时出现这个问题：

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

我意识到这是一个CORS问题（在不强制执行字体CORS的Safari上完美运行），因此安装了django-cors-headers，并允许所有主机，但错误仍然存在。这是我唯一的CORS问题，非常令人沮丧，因为该应用程序在Safari和Chrome（我们使用的唯一浏览器）上已经运行了数月！任何帮助将不胜感激。

- Admin Consulmet

---

我们不确定您的页面上可能会有什么影响您认为需要django-cors-headers帮助的<link>。您能澄清一下吗？例如，在这个问题中，第三方js库prefixtree通过修改<link>来引起问题，并且可以添加一个属性来禁用其效果：https://dev59.com/dl8e5IYBdhLWcg3wfaYy - rakslice

Answer 1

根据情况，有几种方法可以解决这个问题，但我认为以下三种是最常见的解决方案：

1. [Google Cloud] 配置存储桶上的 CORS。

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

其中cors-json-file.json是您的CORS配置文件：

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

更多：https://cloud.google.com/storage/docs/cross-origin 2. [Nginx] 强制 Access-Control-Allow-Origin

前往 /etc/nginx/sites-available/[your_server_config] 并将此行添加到您的服务器块中：

add_header Access-Control-Allow-Origin *;

更多信息：https://serverfault.com/questions/162429/how-do-i-add-access-control-allow-origin-in-nginx 3. [Django-cors] 将CORS头添加到Django响应中。

请查看这个链接：

• https://github.com/ottoyiu/django-cors-headers
• django-cors-headers not work

- Salva Carrión