最新的 Chrome (46.0.2490.7) 无法通过 https CORS 从 S3 存储桶加载字体

Posted 2023-03-04

【中文标题】最新的 Chrome (46.0.2490.7) 无法通过 https CORS 从 S3 存储桶加载字体

【英文标题】：Latest Chrome (46.0.2490.7) fails to load fonts over https CORS from S3 bucket

【发布时间】：2016-01-15 07:12:50

【问题描述】：

更新：看起来像 chrome 中的一个错误：https://code.google.com/p/chromium/issues/detail?id=544879

我们已经有一个网站运行了几年，它的字体托管在 S3 上。它不是 S3 网站，而是私有 CDN，我们使用 S3 认证 URL 加载字体。

随着 Chrome 的最新更新，由于 CORS 问题，此功能已停止工作。

像这样为 CORS 配置 S3..

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

这一直有效，直到 chrome 46.0.2490.7（2 天前发布）。 现在出现以下错误：

Font from origin 'https://domain.s3-eu-west-1.amazonaws.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://domain.co.uk' is therefore not allowed access.

听起来 Chrome 本身正在添加凭据标志？我从 8 月发现这张票 https://code.google.com/p/chromium/issues/detail?id=516192 听起来他们在 https 相同域请求上强制执行凭据标志，但这是一个 CORS https 请求，所以不应该添加它？

此外，即使我删除 * 并添加域以查看是否修复它，它也会说没有设置 Access-Control-Allow-Origin 值，但事实并非如此。

有人知道这是怎么回事，我错过了什么吗？

米

【问题讨论】：

这绝对是错误的行为。 CSS Fonts Module Level 3 清楚地表明"when fetching, user agents must use "Anonymous" mode".

【参考方案1】：

到目前为止，我发现的唯一解决方法是通过同一域服务器代理字体。不理想。

我开了一张票：https://code.google.com/p/chromium/issues/detail?id=544879

【讨论】：

我遇到了同样的问题，得出了同样的结论。

是的，chrome 开发者已经修复了它，只是等待它进入 chrome。code.google.com/p/chromium/issues/detail?id=544879

【参考方案2】：

尝试更改存储桶的 CORS 政策

转到

Amazon S3 > [your-bucket] > Permissions >  CORS configuration

并使用以下配置

<!-- Sample policy -->
<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

参考：Official doc here