CORS 設定範例

總覽 設定

本頁面顯示跨源資源共享 (CORS) 的設定範例。

在 bucket 上設定 CORS 時，您允許不同來源的資源互動，但通常為防止惡意行為而遭到禁止。如要瞭解如何建構要求，在值區中設定或編輯 CORS 設定，請參閱「使用 CORS」一文中的操作說明。

請參閱下列其他資源：

基本 CORS 設定

假設您有一個動態網站，使用者可透過 your-example-website.appspot.com 存取。您在名為 your-example-bucket 的 Cloud Storage bucket 中代管圖片檔案。您想在網站上使用該圖片，因此必須在 your-example-bucket 上套用 CORS 設定，讓使用者瀏覽器從 bucket 要求資源。根據下列設定，預檢要求有效時間為 1 小時，且成功的瀏覽器要求會在回應中傳回資源的 Content-Type。

JSON API

{
  "cors": [
    {
      "origin": ["https://your-example-website.appspot.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
  ]
}

XML API

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

直接上傳檔案 (適用於單頁應用程式)

如果前端應用程式需要直接將檔案上傳至值區 (這需要 PUT 作業)，請使用這項設定。這是單頁應用程式的常見需求，因為應用程式邏輯位於使用者的瀏覽器中，而非後端伺服器。

請注意，PUT 要求一律會觸發預檢檢查。

JSON API

{
 "cors": [
    {
        "origin": ["https://www.example-website.appspot.com"],
        "method": ["PUT", "POST", "OPTIONS"],
        "responseHeader": ["Content-Type", "x-goog-resumable"],
        "maxAgeSeconds": 3600
      }
  ]
}

XML API

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://your-example-website.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>PUT</Method>
      <Method>POST</Method>
      <Method>OPTIONS</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
      <ResponseHeader>x-goog-resumable</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

用戶端程式碼範例

JavaScript

// Uploading a file using a Signed URL or direct PUT
await fetch(gcsSignedUrl, {
  method: 'PUT',
  body: fileBlob,
  headers: {
    'Content-Type': 'application/pdf'
  }
});

已驗證的資料存取權

如果應用程式傳送不記名權杖或Google Identity 標頭來存取受保護 (非公開) 的物件，請使用這項設定。

JSON API

{
 "cors": [
    {
        "origin": ["https://www.example-secure-app.appspot.com"],
        "method": ["GET", "HEAD"],
        "responseHeader": ["Authorization", "Content-Type"],
        "maxAgeSeconds": 3600
      }
  ]
}

XML API

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

允許多個相符子網域存取

如果您有多個開發或測試環境需要存取同一個值區，請使用這項設定。指定子網域時使用萬用字元 *，即可比對多個子網域。舉例來說，*.example.com 可用於比對 test.example.com 和 prod.example.com。

JSON API

{
 "cors": [
    {
        "origin": ["https://*.example.com"],
        "method": ["GET", "POST", "OPTIONS"],
        "responseHeader": ["Content-Type", "x-goog-resumable"],
        "maxAgeSeconds": 3600
      }
  ]
}

XML API

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://*.example.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>POST</Method>
      <Method>OPTIONS</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
      <ResponseHeader>x-goog-resumable</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

允許任何來源存取

如果資料公開，且不需要限制，請使用這項設定。 將萬用字元 * 指定為來源，即可允許來自任何來源的要求。請注意，如果用戶端在要求中設定 credentials: include，這項設定會導致對值區的要求失敗。

JSON API

{
 "cors": [
    {
        "origin": ["*"],
        "method": ["GET"],
        "responseHeader": ["Content-Type"],
        "maxAgeSeconds": 1800
      }
  ]
}

XML API

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>*</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>1800</MaxAgeSec>
  </Cors>
</CorsConfig>

gcloud CLI 的 CORS 設定結構

gcloud storage buckets update --cors-file 指令預期會收到只包含 CORS 規則清單的檔案。使用 Google Cloud CLI 指定要設定的 CORS 設定時，請從 JSON 檔案中移除頂層 "cors": 包裝函式。

舉例來說，這項 gcloud CLI 指令會在值區中設定 CORS 設定：

gcloud storage buckets update gs://example_bucket --cors-file=example_cors_file.json

以下是 example_cors_file.json 的設定範例，其中使用 gcloud storage buckets update --cors-file 指令的正確結構。

[
    {
      "origin": ["https://your-example-website.appspot.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

後續步驟