設定跨源資源共享 (CORS)

跨源資源共享 (CORS) 是一種允許不同來源的資源進行互動的一種機制,但通常為防止惡意行為而遭到禁止。您可以透過本主題瞭解如何在 Cloud Storage 值區設定 CORS。

如要進一步瞭解 Cloud Storage CORS 支援,請參閱跨源資源共享 (CORS) 一文。

設定值區的 CORS

如要進行值區的 CORS 設定,請指定能夠識別該值區將接受的要求類型相關資訊,例如 HTTP 方法及來源網域。您可以使用 gsutil 指令列工具XML APIJSON APICloud Storage 的用戶端程式庫,在值區中設定 CORS 設定。

以下範例說明如何在名為 example-bucket 的值區中設定 CORS。這個範例會依據下列條件進行 CORS 設定:

  • 允許源自 example.appspot.com 的要求。
  • 允許使用 GETHEADDELETE HTTP 方法的要求。
  • 允許跨源共享 Content-Type 回應標頭。
  • 如為預檢要求,則允許瀏覽器在必須重複預檢要求之前先發出 3600 秒 (1 小時) 的要求。

gsutil

使用 gsutil cors 指令在值區中設定 CORS:

gsutil cors set cors-json-file.json gs://example-bucket

其中 cors-json-file.json 是包含下列內容的本機檔案:

[
    {
      "origin": ["http://example.appspot.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

您也可以使用 gsutil cors 指令來取得值區的 CORS 設定:

gsutil cors get gs://example-bucket

用戶端程式庫

如要透過程式進行值區的 CORS 設定或取得相關設定,請使用其中一個 Cloud Storage 的用戶端程式庫。請遵循以下參考內容開始使用:

REST API

JSON API

使用 JSON APIBuckets: insert 方法設定新值區的 CORS,或使用 Buckets: patch 設定現有值區的 CORS。以下範例顯示 Buckets: patch 方法的用法。

PATCH /storage/v1/b/example-bucket?fields=cors HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg
content-length: 132
accept: application/json
accept-encoding: gzip, deflate
content-type: application/json

{
  "location": "us-east-1",
  "storageClass": "standard",
  "cors": [
      {
          "maxAgeSeconds": "3600",
          "method": [
             "GET"
             "HEAD"
             "DELETE"
          ],
          "origin": [
             "http://example.appspot.com"
          ],
          "responseHeader":[
            "Content-Type"
         ]
      }
  ]
}

您可以使用 Buckets: get 方法來取得值區的 CORS 設定:

GET https://www.googleapis.com/storage/v1/b/example-bucket
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

XML API

使用 XML API設定值區 CORS 方法來設定值區的 CORS。

PUT http://storage.googleapis.com/example-bucket?cors HTTP/1.1
Host: storage.googleapis.com
Content-Length: 412
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>http://example.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>HEAD</Method>
      <Method>DELETE</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

您可以使用取得值區 CORS 方法來取得值區的 CORS 設定:

GET http://storage.googleapis.com/example-bucket?cors HTTP/1.1
Host: storage.googleapis.com
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

CORS 要求疑難排解

如果您在存取不同來源的 Cloud Storage 值區時發生意外行為,請嘗試執行下列步驟:

  1. 在目標值區上使用 gsutil cors get 以取得其 CORS 設定。如果您有多個 CORS 設定項目,當您執行下列步驟時,請確定要求值對應到相同單一 CORS 設定項目中的值。

  2. 使用選擇的工具檢查要求及回應。在 Chrome 瀏覽器中,您可以使用標準開發人員工具來查看此資訊:

    1. 按一下瀏覽器工具列中的 Chrome 選單 Chrome 選單圖示。
    2. 選取 [More Tools] (更多工具) > [Developer Tools] (開發人員工具)
    3. 按一下 [Network] (網路) 分頁標籤。
    4. 從您的應用程式或指令列傳送要求。
    5. 在顯示網路活動的窗格中,找出要求。
    6. 在 [Name] 欄中,按一下與要求對應的名稱。
    7. 按一下 [Headers] 分頁標籤查看回應標頭,或按一下 [Response] 分頁標籤查看回應內容。

    如果您沒有看到要求和回應,則可能是瀏覽器快取了之前失敗的預檢要求嘗試。清除瀏覽器的快取應該會一併清除預檢快取。如果沒有清除,請將 CORS 設定中的 MaxAgeSec 設為較低的值 (如果沒有指定,則預設值為 1800,亦即 30 分鐘),請等待舊 MaxAgeSec 設定的時間截止,然後重試要求。這會執行新的預檢要求,進而擷取新的 CORS 設定並清除快取項目。完成問題除錯後,請將 MaxAgeSec 改回較高的值,以降低值區的預檢流量。

  3. 請確定要求含有 Origin 標頭,且該標頭值至少符合值區 CORS 設定中的一個 Origins 值。請注意,這些值的通訊協定、主機和通訊埠必須完全相符。以下是一些可接受的相符範例:

    • http://origin.example.comhttp://origin.example.com:80相符 (因為 80 是預設的 HTTP 通訊埠),但與 https://origin.example.comhttp://origin.example.com:8080http://origin.example.com:5151http://sub.origin.example.com 不相符。

    • https://example.com:443https://example.com 相符,但與 http://example.comhttp://example.com:443 不相符。

    • http://localhost:8080 只與 完全相符,但與 http://localhost:5555http://localhost.example.com:8080 不相符。

  4. 請確定要求的 HTTP 方法 (如果這是簡易要求),或 Access-Control-Request-Method 中指定的方法 (如果這是預檢要求) 至少符合值區 CORS 設定中的一個 Methods 值。

  5. 如果這是預檢要求,請查看是否含有一或多個 Access-Control-Request-Header 標頭。如果是,則請確定每個 Access-Control-Request-Header 值都符合值區 CORS 設定中的 ResponseHeader 值。所有在 Access-Control-Request-Header 中指名的標頭都必須納入 CORS 設定,預檢要求才會成功,並在回應中納入 CORS 標頭。

本頁內容對您是否有任何幫助?請提供意見:

傳送您對下列選項的寶貴意見...

這個網頁
Cloud Storage
需要協助嗎?請前往我們的支援網頁