使用 Google 字体的 Chrome 上的 CORS 错误

Posted 2023-03-03

【中文标题】使用 Google 字体的 Chrome 上的 CORS 错误

【英文标题】：CORS error on Chrome with Google Fonts

【发布时间】：2014-11-29 03:42:46

【问题描述】：

最近升级了 Chrome，我收到以下错误：

来自“http://storage.googleapis.com”的字体已被跨源资源共享策略阻止加载：否 请求中存在“Access-Control-Allow-Origin”标头 资源。 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 问题（它在 Safari 上完美运行，它不对字体强制执行 CORS）所以安装了 django-cors-headers，并允许所有主机，但错误仍然存​​在。这是我唯一的 CORS 问题，而且相当令人沮丧，因为该应用在 Safari 和 Chrome（我们唯一使用的浏览器）上运行了几个月！

任何帮助将不胜感激。

【问题讨论】：

对我们来说，您的页面上可能会影响您的<link> 的内容并不明显，您认为django-cors-headers 可能会有所帮助。你能澄清一下吗？例如在这个问题中，第三方 js 库前缀树通过修改 <link> 导致了问题，并且可以添加一个属性来禁用其效果：***.com/questions/25694456/…

【参考方案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] 强制访问控制允许来源

转到 /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