Google云端存储字体CORS问题

Question

我的应用中的静态文件上传到GCS并设置为公共链接.当请求一个静态资源(在这种情况下是一个字体)时,它会点击一个urlhttps://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}]

问题是这个凭证标志设置在哪里？我重定向到公共链接,因此它不是ajax请求,链接在css文件的font-face声明中.

也不是将原点设置为特定域或域列表的选项,因为我的应用程序是多租户的,并且有多个不同的域访问同一个文件.

这似乎在请求来自时正常工作,http但在启用时https 也会出现此错误,这也可以在safari中按预期工作,但不能使用chrome.

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

这意味着可以从所有来源阅读.

Answer 2

2019 年编辑：Chrome 几年前就已修复！

有趣的！Chrome 存在一个错误（问题544879），Chrome 坚持认为它需要凭据才能加载字体，尽管事实并非如此。看来这很可能是你的问题。

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

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