跨來源資源共享 (CORS) - AWS SDK for JavaScript
CORS 的工作原理是否需要 CORS 設定？為 Amazon S3 儲存貯體設定 CORSCORS 組態範例

AWS SDK for JavaScript V3 參API考指南詳細描述了 AWS SDK for JavaScript 版本 3（V3）的所有API操作。

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

跨來源資源共享 (CORS)

跨來源資源分享 (CORS) 是現代 Web 瀏覽器的一項安全功能，其可讓 Web 瀏覽器協調能請求外部網站或服務的網域。

由於系統會將大多數資源請求傳送至外部網域 (如 Web 服務的端點)，當您使用 AWS SDK for JavaScript 開發瀏覽器應用程式時，CORS 是項重要的考量條件。如果您的 JavaScript 環境強制執行 CORS 安全性，則必須使用服務配置 CORS。

CORS 會根據下列項目判斷是否允許跨來源要求中的資源共用：

  • 提出請求的特定網域

  • 提出的 HTTP 請求類型 (GET、PUT、POST、DELETE 等)

CORS 的工作原理

在最簡單的案例中，瀏覽器指令碼會從另一個網域中的伺服器發出資源 GET 請求。依據該伺服器的 CORS 組態而定，如果請求是來自有權提交 GET 請求的網域，則跨來源伺服器會透過傳回請求的資源來予以回應。

若發出請求的網域或 HTTP 請求類型皆未經授權，該請求即會遭拒。然而，CORS 能夠在實際提交請求前進行預檢。此案例中，會發出預檢請求，此請求中會一併傳送 OPTIONS 存取請求操作。如果跨來源伺服器的 CORS 組態將存取權限授予給提出請求的網域，伺服器就會傳回預檢回應，其中列出提出請求的網域能對請求資源所進行的 HTTP 請求類型。

CORS 請求的處理流程

是否需要 CORS 設定？

Amazon S3 儲存貯體需要 CORS 組態，才能對它們執行操作。在某些 JavaScript 環境中，CORS 可能不會強制執行，因此不需要配置 CORS。例如，如果您從 Amazon S3 儲存貯體託管應用程式，並從*.s3.amazonaws.com或某些其他特定端點存取資源，則您的請求將無法存取外部網域。因此，這個組態就不需要 CORS。在這種情況下，CORS 仍然用於 Amazon S3 以外的服務。

為 Amazon S3 儲存貯體設定 CORS

您可以將 Amazon S3 儲存貯體設定為在 Amazon S3 主控台中使用 CORS。

如果您要在 AWS Web 服務管理主控台中設定 CORS，則必須使用 JSON 來建立 CORS 組態。新的 AWS Web 服務管理主控台僅支援 JSON CORS 設定。

重要

在新的 AWS Web 服務管理主控台中，CORS 組態必須是 JSON。

  1. 在 AWS Web 服務管理主控台中，開啟 Amazon S3 主控台，找到您要設定的儲存貯體，然後選取其核取方塊。

  2. 在開啟的窗格中，選擇「權限」。

  3. 在 [權限] 索引標籤上，選擇 [CORS 設定]。

  4. 在 CORS 設定編輯器中輸入您的 CORS 設定，然後選擇 [儲存]。

CORS 組態是一種 XML 檔案，包含 <CORSRule> 內的一系列規則。一個組態最多可以擁有 100 條規則，而規則是由下列其中一個標籤所定義：

  • <AllowedOrigin>— 指定您允許發出跨網域要求的網域來源。

  • <AllowedMethod>— 指定跨網域要求中允許的要求類型 (GET、PUT、POST、刪除、HEAD)。

  • <AllowedHeader>— 指定預檢請求中允許的標頭。

如需設定範例，請參閱如何在儲存貯體上設定 CORS？ 在 Amazon 簡單存儲服務用戶指南。

CORS 組態範例

下列 CORS 組態範例可讓使用者從網域example.org檢視、新增、移除或更新值區內的物件。不過，我們建議您<AllowedOrigin>將網站的網域範圍設定為範圍。若要允許任何來源，則可指定 "*"。

重要

在新的 S3 主控台中，CORS 組態必須為 JSON 格式。

XML
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>https://example.org</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
  </CORSRule>
</CORSConfiguration>
JSON
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://www.example.org"
        ],
        "ExposeHeaders": [
             "ETag",
             "x-amz-meta-custom-header"]
    }
]

這個組態並不會授權使用者對儲存貯體執行任何動作，它使瀏覽器的安全模型允許向 Amazon S3 發出請求。必須透過儲存貯體許可或 IAM 角色許可設定許可。

您可以使用ExposeHeader來讓開發套件讀取從 Amazon S3 傳回的回應標頭。例如，從PUT或多部分上傳中讀取標ETag題，您需要在配置中包含ExposeHeader標籤，如前面的範例所示。軟體開發套件僅能存取透過 CORS 組態公開的標頭。若您在物件上設定中繼資料，則傳回的值即為具有字首 x-amz-meta- 的標頭 (如 x-amz-meta-my-custom-header)；請務必以相同方式公開該標頭。