☰

AWS Cloudfront CORS 字体文件问题

tag-icon • tag-icon amazon-s3 amazon-cloudfront cors css
AWS Cloudfront CORS 字体文件问题

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

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

如上所述，这只是 html 文件。全部然后从 cloudfront 端点下载静态内容，该端点指向一个存储桶作为其来源。我们将其称为 xxxx.cloudfront.net，存储桶称为 my-bucket。

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

因此，我自然而然地设置了所有 CORS 内容。首先，存储桶是完全公开的，并且具有以下 CORS 策略：

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

这似乎对一切都有效......除了字体文件！我可能应该提一下存储桶的文件夹结构。它有三个文件夹，生产、开发和公共。这些内容应该是相当不言自明的。公共文件夹包含字体，以及一些第三方 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 从 css 加载的。查看浏览器在加载应用程序时生成的请求，我可以清楚地看到，例如设置了 origin 标头，它不是用于请求 js 或 css 文件的。Set-Fetch-Mode 设置为“cors”，而对于其他文件，它设置为“no-cors”。

无论如何，我尝试在云端修复该问题。首先，我在源配置中添加了标头“Access-Control-Allow-Origin: *”。然后，我为源添加了行为配置，以允许路径模式 * 的 GET、HEAD、OPTIONS。

而现在...好吧，现在我仍然遇到同样的问题，并且完全没有主意，虽然想知道为什么@font-face创建的请求与javascript和css资源的请求相比有如此大的不同，但最重要的是，我到底能做些什么才能在其中加载该死的字体？

答案1

好吧，这确实很烦人，但我想这是合乎逻辑的。

我上面发布的修复做工作，但配置更改不会使 cloudfront 缓存失效。并且由于 CORS 错误是由浏览器，cloudfront 确实缓存了该响应、标头和所有内容，因为它看不出有什么问题。

长话短说：配置更改后，cloudfront 缓存无效，现在可以正常工作了。啊！

相关内容