AWS Cloudfront CORS 字体文件问题

我有一个从 CloudFront 端点传送到浏览器的 Javascript 应用程序。应用程序的所有静态文件都托管在 S3 存储桶中。这涉及一大堆 javascript 和 css 文件，以及一些字体文件。

加载整个应用程序的 html 是由服务器生成和交付的，我们称该服务器为“https://my.domain.com”。

如前所述，这只是 html 文件。然后从指向存储桶作为其来源的云端端点下载所有静态内容。我们将这些称为 xxxx.cloudfront.net 和存储桶 my-bucket。

据我了解，几乎所有从生成的 html 到云端端点的请求都是 CORS 请求，因为 html 的来源是 my.domain.com，并且所有请求的文件显然都没有托管在该域上。

所以很自然，我去设置所有 CORS 的东西。首先，bucket 是完全公开的，它具有以下 CORS 策略：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*",
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

这似乎对一切都有效……除了字体文件！我可能应该提到存储桶的文件夹结构。它有三个文件夹，生产、开发和通用。这些内容应该是不言自明的。Common 包含字体，以及一些 3rd 方 javascript 库。生产和开发包含各自环境的 js 和 css。

无论如何，除了字体文件之外，所有内容都会加载，我收到以下错误：

Access to font at 'https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2' from origin 'https://my.domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

让我感到非常奇怪的是，只有字体文件会有这个问题。公共文件夹中的其他文件似乎加载得很好，如果我只是将https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2粘贴到我的浏览器中，它可以工作。

唯一的区别似乎是这些文件不是从 html 加载的，而是通过 @font-face thingy 从 css 加载的。查看加载应用程序时浏览器生成的请求，我可以清楚地看到例如设置了 origin 标头，而不是用于请求 js 或 css 文件。Set-Fetch-Mode 设置为“cors”，而对于其他文件，它设置为“no-cors”。

无论如何，我试图在云端解决这个问题。首先，我在原始配置中添加了标题“Access-Control-Allow-Origin: *”。然后我为源添加了一个行为配置，以允许路径模式 *.

现在......好吧，现在我仍然有同样的问题，并且完全没有想法，虽然想知道为什么@font-face创建的请求与对javascript和css资源的请求相比形成如此不同，但是最重要的是，我到底能做些什么来加载他们血腥的字体？