為什麼影像未載入 CloudFront？

簡短描述

影像可能會因為許可或組態問題，或者 403 或 404 錯誤而被阻止載入。

若要確定錯誤訊息是否會阻止影像載入，請開啟瀏覽器的開發人員工具。在 Network (網路) 索引標籤上，找出影像請求的網路呼叫。在請求的回應標頭中，檢查 404 或 403 錯誤代碼。

如果 Server (伺服器) 的值設定為 Amazon Simple Storage Service (Amazon S3) 或自訂原始伺服器名稱，則原始伺服器會傳回錯誤代碼。

解決方案

CloudFront 沒有存取 Amazon Simple Storage Service (Amazon S3) 原始伺服器的許可

如果您已在 CloudFront 中設定原始存取身分 (OAI) 以存取來自 Amazon S3 Rest API 端點的映像，請確認儲存貯體具有可授予 OAI 存取儲存貯體中內容的儲存貯體政策。如果沒有該政策，則從 CloudFront 發出請求時，會傳回 403: Access Denied (403：存取遭拒) 錯誤，並且不會載入影像。

若要解決此錯誤，請檢查您的 S3 儲存貯體政策許可。

S3 來源或自訂來源不存在影像

如果請求的影像檔案在儲存貯體中不存在，或放置在不同的資料夾中，則會傳回 403 或 404 錯誤。傳回的錯誤取決於您的 S3 儲存貯體許可：

• 如果您在儲存貯體上擁有 s3:ListBucket 許可，則 Amazon Simple Storage Service (Amazon S3) 會傳回 404: No Such Key error (404：沒有此類金鑰) 錯誤。
• 如果您沒有 s3:ListBucket 許可，則 Amazon Simple Storage Service (Amazon S3) 會傳回 403: Access Denied (403：存取遭拒) 錯誤。

行為路徑模式會將請求導向至不正確的來源或資料夾

如果您的分發有多個具有不同路徑模式的行為，則影像可能會導向至不正確的來源或其中不存在檔案的資料夾。在此情況下，您會看到 404 錯誤。

若要解決此錯誤，請檢閱分發的行為和路徑模式。確認請求置於與路徑模式相符的正確行為，並導向至正確的來源。

例如，在下列組態中，Behavior1 具有路徑模式 "test"，可將請求路由至 S3 來源。Behavior2 具有路徑模式 "Default(*)"，該模式將流量路由至 Elastic Load Balancing 來源。

Behavior1: Path pattern = test ====> S3 origin 
Default Behavior: Path pattern = Default (*)=====> ELB origin

當發出 “https://example.com/test/myimage.png” 請求時，分發將比對路徑與 Behavior2 的路徑模式 Default (*)。請求與 Behavior1 路徑模式 test 不相符，因為在 test 末尾沒有萬用字元。如果沒有萬用字元，則此請求會比對預設行為的路徑模式，並導向至 ELB 來源。由於該物件在 ELB 來源中不存在，因此請求將傳回 404 錯誤，並且不會載入影像。

未針對標頭、Cookie 或查詢字串進行行為快取設定

來源可能需要在請求中傳遞特定標頭、Cookie 或查詢字串，以提供請求的影像。在此情況下，使用 CloudFront 發出請求時，不會載入影像。然而，如果直接向來源發出相同的請求，則請求會成功，並且來源會傳回請求的資源。

若要進行疑難排解，請確定來源是否需要特定標頭、Cookie 或查詢字串才能處理要求。然後，請確定行為快取設定中允許這些要求。

使用來源請求政策，以允許 CloudFront 傳送至來源請求中包含的值 (標頭、Cookie 和查詢字串)。此外，您還可以使用舊式快取設定。

未在來源正確設定影像的中繼資料

如果來源中 Content-Type 的中繼資料未設定為 image/png，則會下載影像而不是顯示在瀏覽器中。

若要解決此問題，請檢查 Content-Type 中繼資料。如有需要，請將 S3 或自訂來源中影像的值更新為 image/png。

CORS 錯誤導致未載入影像

如果 CloudFront 中的 CORS 組態或來源設定不正確，您會收到錯誤訊息："No 'Access-Control-Allow-Origin' header is present on the requested resource." (「請求的資源上沒有 'Access-Control-Allow-Origin' 標頭。」)

若要解決此問題，請確認已為 CloudFront 和來源設定 CORS 組態。如需詳細資訊，請參閱如何解決 CloudFront 的"No 'Access-Control-Allow-Origin' header is present on the requested resource." (「請求的資源上沒有 'Access-Control-Allow-Origin' 標頭。」) 錯誤？

---