CORS 構成の例

概要設定

このページでは、クロスオリジンリソースシェアリング（CORS）の構成例について説明します。バケットに CORS 構成を設定すると、異なるオリジンのリソース間のインタラクションを許可できます。これは通常、悪意のある動作を防ぐために禁止されています。

基本的な CORS 構成

ユーザーが your-example-website.appspot.com でアクセスできる動的ウェブサイトがあるとします。your-example-bucket という名前の Cloud Storage バケットに画像ファイルがホストされています。ウェブサイトで画像を使用するには、your-example-bucket に CORS 構成を適用して、ユーザーのブラウザがバケットからリソースをリクエストできるようにする必要があります。以下の構成に基づいているため、プリフライトリクエストは 1 時間有効であり、ブラウザリクエストが成功するとレスポンスでリソースの Content-Type が返されます。

コマンドライン

gcloud コマンドの例

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

CORS 構成を含む JSON ファイルの例

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

Google Cloud CLI を使用して CORS 構成を設定する方法の詳細については、gcloud storage buckets update リファレンスドキュメントをご覧ください。

REST API

JSON API

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

CORS 構成ファイルの一般的な形式については、JSON のバケットリソース表現をご覧ください。

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>

CORS 構成ファイルの一般的な形式については、XML の CORS 構成形式をご覧ください。

バケットから CORS 設定を削除する

バケットから CORS 設定を削除するには、空の CORS 構成ファイルを指定します。

コマンドライン

--clear-cors フラグを指定して gcloud storage buckets update コマンドを使用する場合は、バケットから CORS 構成を削除します。

gcloud storage buckets update gs://BUCKET_NAME --clear-cors

ここで、BUCKET_NAME は、CORS 構成を削除するバケットの名前です。