☰

AWS Cloudfront CORS 字體檔案問題

tag-icon • tag-icon amazon-s3 amazon-cloudfront cors css
AWS Cloudfront CORS 字體檔案問題

我有一個從 CloudFront 端點傳送到瀏覽器的 Javascript 應用程式。應用程式的所有靜態檔案都託管在 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
    }
]

這似乎對一切都有效......除了字體檔案！我可能應該提到存儲桶的資料夾結構。它有三個資料夾，生產、開發和通用。這些內容應該是不言自明的。 Common 包含字型以及一些第三方 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 確實快取了該回應、標頭和所有內容，因為它看不到任何問題。

長話短說：配置更改後雲端前端快取失效，現在可以使用了。啊啊！

相關內容