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資源的請求相比形成如此不同，但是最重要的是，我到底能做些什麼來載入他們血腥的字型？

好的，這很煩人，但我想是合乎邏輯的。

我在上面發布的修復確實有效，但配置更改不會使雲端記憶體失效。由於 CORS 錯誤是由瀏覽器生成的，因此 cloudfront 確實記憶體了該響應、標頭和所有內容，因為它看不到任何問題。

長話短說：配置更改後無效的雲端記憶體，現在它可以工作了。啊！

引用自：https://serverfault.com/questions/1073320