クロスオリジン リソース シェアリング(CORS)の構成

クロスオリジン リソース シェアリング(CORS)は、さまざまな生成元のリソース間でのやり取りを可能にするメカニズムで、通常は悪意のある動作を防ぐために禁止されています。Cloud Storage バケットの CORS を構成する方法については、このトピックをご覧ください。

Cloud Storage での CORS のサポートの詳細については、クロスオリジン リソース シェアリング(CORS)をご覧ください。

バケットの CORS を構成する

バケットの CORS 構成を設定するには、受け入れられるリクエストのタイプを識別する情報(HTTP メソッドや発信元のドメインなど)を指定します。バケットの CORS 構成の設定には、gsutil コマンドライン ツールXML APIJSON APICloud Storage 用クライアント ライブラリを使用できます。

次の例は、example-bucket という名前のバケットに CORS を構成する方法を示しています。以下の例では、CORS 構成を次のように設定しています。

  • example.appspot.com から発生したリクエストを許可する。
  • GETHEAD、または DELETE HTTP メソッドを使用するリクエストを許可する。
  • Content-Type レスポンス ヘッダーを生成元間で共有できるようにする。
  • プリフライト リクエストの場合、ブラウザで 3,600 秒(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

新しいバケットに CORS を構成するには JSON APIBuckets: insert メソッドを使用し、既存のバケットに CORS を構成するには Buckets: patch メソッドを使用します。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 APISet Bucket 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>

Get Bucket 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. [その他のツール] > [デベロッパー ツール] の順に選択します。
    3. [Network] タブをクリックします。
    4. アプリケーションまたはコマンドラインから、リクエストを送信します。
    5. ネットワーク アクティビティが表示されているペインで、リクエストを探します。
    6. [Name] 列で、リクエストに対応する名前をクリックします。
    7. [Headers] タブをクリックしてレスポンス ヘッダーを確認するか、[Response] タブをクリックしてレスポンスの内容を表示します。

    リクエストとレスポンスが表示されない場合は、ブラウザのキャッシュに以前の失敗したプリフライト リクエストが入っている可能性があります。ブラウザのキャッシュをクリアすると、プリフライトのキャッシュもクリアされます。クリアされない場合は、CORS 構成の MaxAgeSec 値を低い値に設定し、古い MaxAgeSec の設定時間待機した後、再度リクエストを試してみてください。指定されていない場合のデフォルト値は 1,800(30 分)です。これにより新しいプリフライト リクエストが実行されて、新しい CORS 構成が取得され、キャッシュ エントリが削除されます。問題をデバッグし終えたら、MaxAgeSec を高い値に戻して、バケットへのプリフライトのトラフィックを削減します。

  3. リクエストに Origin ヘッダーがあること、およびヘッダー値がバケットの CORS 構成内の Origins 値の少なくとも 1 つと一致することを確認します。値のスキーム、ホスト、およびポートが正確に一致している必要があります。受け入れ可能な一致の例を次に示します。

    • 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 値の少なくとも 1 つと一致していることを確認します。

  5. これがプリフライト リクエストの場合は、Access-Control-Request-Header ヘッダーが含まれているかどうかを確認します。含まれている場合は、各 Access-Control-Request-Header 値がバケットの CORS 構成内の ResponseHeader 値と一致することを確認します。プリフライト リクエストが正常に終了し、レスポンスに CORS ヘッダーが含まれるためには、Access-Control-Request-Header に指定されたすべてのヘッダーが CORS 構成に含まれていることが必要です。

このページは役立ちましたか?評価をお願いいたします。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。