Google Cloud Storage 字体 CORS 问题

Question

我的应用程序中的静态文件已上传到 GCS 并设置为 public links。当请求静态资源（在本例中为字体）时，它会遇到 url 之类的 https://example.com/static/fonts/font.woff 然后服务器将请求重定向到适当的 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}]

问题是这个凭据标志设置在哪里？我确实重定向到 public link 所以它不是 ajax 请求，link 在 css 文件的字体声明中。

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

当请求来自 http 时，这似乎可以正常工作，但在 https 时出现此错误这也在 safari 中按预期工作，但不适用于 chrome.

Answer 1

自 2019 年起编辑：Chrome 已于几年前修复！

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

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

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

Answer 2

在 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
    }
]

意思是可以阅读所有来源。

Answer 3

在我们的例子中，问题是我们天真地使用 storage.cloud.google.com/path/to/resource public URL 作为我们前端应用程序的基础 Url，而它确实不允许 CORS 请求...

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

More information on our CORS is handled by google cloud

Google Cloud Storage 字体 CORS 问题

Google Cloud Storage fonts CORS issue

css

fonts

google-chrome

cors

google-cloud-storage