Google Cloud Storage 字体 CORS 问题答案

【问题标题】：Google Cloud Storage fonts CORS issueGoogle Cloud Storage 字体 CORS 问题
【发布时间】：2016-01-19 10:22:04
【问题描述】：

我的应用程序中的静态文件已上传到 GCS 并设置为公共链接。当请求静态资源（在本例中为字体）时，它会点击像 https://example.com/static/fonts/font.woff 这样的 url 然后服务器将请求重定向到要服务的适当 GCS url。

这里的问题是使用 chrome 我得到了这个 CORS 问题：

xxxxxxxxe3b8ccc0e3:1 Font from origin 'https://storage.googleapis.com' has been blocked from loading by Cross-Origin Resource Sharing policy: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'https://example.com' is therefore not allowed access.

存储桶和所有子文件夹的 CORS 默认设置如下：

[{"origin": ["*"], "responseHeader": ["Content-Type"], "method": ["GET"], "maxAgeSeconds": 3600}]

问题是这个凭据标志设置在哪里？我确实重定向到公共链接，因此它不是 ajax 请求，该链接位于 css 文件的字体声明中。

也不能将源设置为特定域或域列表，因为我的应用是多租户的，并且有多个不同的域访问同一个文件。

当请求来自http 时，这似乎可以正常工作，但在https 上时会出现此错误这在 safari 中也可以按预期工作，但在 chrome 中没有。

【问题讨论】：

你是如何加载字体的？你在 CSS 文档中使用@font-face 吗？
@BrandonYarbrough 是的，正确。 @font-face {...}
我无法重现此问题。您能否粘贴您从 storage.googleapis.com 获得的请求/响应（删除身份验证内容？）我使用您创建的确切 CORS 策略创建了一个网络字体，但没有看到这个问题：yarbrough-cors-test.storage.googleapis.com/index.html
您可以在这里轻松查看：toteme-nyc.com/shop/aw15 将商品添加到购物车并导航到结帐页面。显然是镀铬
啊！相信你可能已经发现了 Chrome 的 bug，见：code.google.com/p/chromium/issues/detail?id=544879

标签： css google-chrome fonts cors google-cloud-storage

【解决方案1】：

在 GCS 上托管字体时，此类问题也可能与 GCS 存储桶上缺少 CORS 配置有关。
（见https://cloud.google.com/storage/docs/cross-origin）。

您可以使用以下方式定义 cors 访问设置：

gsutil cors set cors-config.json gs://my-bucket

你的 cors-config.json 可以是，例如：

[
    {
      "origin": ["*"],
      "responseHeader": ["Content-Type"],
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
]

意思是可以从所有来源读取。

【讨论】：

您可能需要重新上传存储桶中的文件才能使它们具有 CORS 标头
是否可以为“.stutzen.co”或“*.stutzen.co”等子域使用通配符？
移动到新存储桶后，它似乎对我不起作用...公共读取集，cors 集，但由于 CORS，来自 gs 的字体无法加载。

【解决方案2】：

从 2019 年开始编辑：Chrome 在几年前已修复！

有趣！有一个 Chrome 错误（问题 544879），其中 Chrome 坚持认为它需要凭据来加载字体，即使它不需要。看起来这很可能是您的问题。

在您等待修复该错误时，您可以考虑以下选项：

在引用 storage.googleapis.com 时使用 HTTP 而不是 HTTPS。 HTTP 可能不易受到此问题的影响。
在您的 CORS 策略中列出特定域而不是通配符。
与其托管字体并使用 @font-face 引用它，不如托管一个 CSS 文件，并将字体编码为数据 URI。示例：https://www.filamentgroup.com/lab/font-loading.html

【讨论】：

【解决方案3】：

在我们的例子中，问题在于我们天真地使用了 storage.cloud.google.com/path/to/resource 公共 URL 作为前端应用程序的基本 URL，而它不允许 CORS 请求......?

相反，我们必须使用 storage.googleapis.com/path/to/resource 一个！

More information on our CORS is handled by google cloud

【讨论】：