クロスオリジン リソース シェアリング(CORS)は、さまざまな生成元のリソース間でのやり取りを可能にし、通常は悪意のある動作を防ぐために禁止されています。Cloud Storage バケットの CORS を構成する方法については、このトピックをご覧ください。
バケットの CORS を構成する
バケットの CORS 構成を設定するには、バケットで受け入れられるリクエストのタイプを識別する情報(HTTP メソッドや発信元のドメインなど)を指定します。
バケットの CORS 構成を設定するには、次の手順を行います。
コンソール
Cloud コンソールを使用して CORS を管理することはできません。代わりに gsutil を使用してください。
gsutil
適用する CORS 構成を含む JSON ファイルを作成します。サンプルの JSON ファイルについては、構成例をご覧ください。
gsutil cors
コマンドを使用して、バケットに構成を適用します。gsutil cors set CORS_CONFIG_FILE gs://BUCKET_NAME
ここで
CORS_CONFIG_FILE
は、手順 1 で作成した JSON ファイルへのパスです。BUCKET_NAME
は、関連するバケットの名前です。例:my-bucket
コードサンプル
C++
詳細については、Cloud Storage C++ API のリファレンス ドキュメントをご覧ください。
次のサンプルでは、バケットに CORS 構成を設定しています。
次のサンプルでは、既存の CORS 構成をバケットから削除します。
C#
詳細については、Cloud Storage C# API のリファレンス ドキュメントをご覧ください。
次のサンプルでは、バケットに CORS 構成を設定しています。
次のサンプルでは、既存の CORS 構成をバケットから削除します。
Go
詳細については、Cloud Storage Go API のリファレンス ドキュメントをご覧ください。
次のサンプルでは、バケットに CORS 構成を設定しています。
次のサンプルでは、既存の CORS 構成をバケットから削除します。
Java
詳細については、Cloud Storage Java API のリファレンス ドキュメントをご覧ください。
次のサンプルでは、バケットに CORS 構成を設定しています。
次のサンプルでは、既存の CORS 構成をバケットから削除します。
Node.js
詳細については、Cloud Storage Node.js API のリファレンス ドキュメントをご覧ください。
次のサンプルでは、バケットに CORS 構成を設定しています。
次のサンプルでは、既存の CORS 構成をバケットから削除します。
PHP
詳細については、Cloud Storage PHP API のリファレンス ドキュメントをご覧ください。
次のサンプルでは、バケットに CORS 構成を設定しています。
次のサンプルでは、既存の CORS 構成をバケットから削除します。
Python
詳細については、Cloud Storage Python API のリファレンス ドキュメントをご覧ください。
次のサンプルでは、バケットに CORS 構成を設定しています。
次のサンプルでは、既存の CORS 構成をバケットから削除します。
Ruby
詳細については、Cloud Storage Ruby API のリファレンス ドキュメントをご覧ください。
次のサンプルでは、バケットに CORS 構成を設定しています。
次のサンプルでは、既存の CORS 構成をバケットから削除します。
REST API
JSON API
- OAuth 2.0 Playground から認証アクセス トークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。手順については、API 認証をご覧ください。
適用する CORS 構成を含む JSON ファイルを作成します。サンプルの JSON ファイルについては、構成例をご覧ください。
cURL
を使用して JSON API を呼び出し、PATCH
Bucket リクエストを行います。curl --request PATCH \ 'https://storage.googleapis.com/storage/v1/b/BUCKET_NAME?fields=cors' \ --header 'Authorization: Bearer OAUTH2_TOKEN' \ --header 'Content-Type: application/json' \ --data-binary @CORS_CONFIG_FILE
ここで
BUCKET_NAME
はバケットの名前です。例:my-bucket
OAUTH2_TOKEN
は、手順 1 で生成したアクセス トークンです。CORS_CONFIG_FILE
は、手順 2 で作成した JSON ファイルへのパスです。
XML API
- OAuth 2.0 Playground から認証アクセス トークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。手順については、API 認証をご覧ください。
適用する CORS 構成を含む XML ファイルを作成します。サンプルの XML ファイルについては、構成例をご覧ください。
cURL
を使用して、Set Bucket CORS
リクエストで XML API を呼び出します。curl -X PUT --data-binary @CORS_CONFIG_FILE \ -H "Authorization: Bearer OAUTH2_TOKEN" \ -H "x-goog-project-id: PROJECT_ID" \ "https://storage.googleapis.com/BUCKET_NAME?cors"
ここで
BUCKET_NAME
はバケットの名前です。例:my-bucket
OAUTH2_TOKEN
は、手順 1 で生成したアクセス トークンです。PROJECT_ID
は、バケットに関連付けられているプロジェクトの ID です。例:my-project
CORS_CONFIG_FILE
は、手順 2 で作成した XML ファイルへのパスです。
バケットの CORS 構成を表示する
バケットの CORS 構成を表示するには:
コンソール
Cloud コンソールを使用して CORS を管理することはできません。代わりに gsutil を使用してください。
gsutil
gsutil cors
コマンドを使用して、バケットの CORS 構成を取得します。
gsutil cors get gs://BUCKET_NAME
ここで、BUCKET_NAME
はバケットの名前です。例: my-bucket
コードサンプル
クライアント ライブラリを使用してバケットの CORS 構成を表示するには、バケットのメタデータを表示する手順に沿って、レスポンスで CORS フィールドを探します。
C++
詳細については、Cloud Storage C++ API のリファレンス ドキュメントをご覧ください。
C#
詳細については、Cloud Storage C# API のリファレンス ドキュメントをご覧ください。
Go
詳細については、Cloud Storage Go API のリファレンス ドキュメントをご覧ください。
Java
詳細については、Cloud Storage Java API のリファレンス ドキュメントをご覧ください。
Node.js
詳細については、Cloud Storage Node.js API のリファレンス ドキュメントをご覧ください。
PHP
詳細については、Cloud Storage PHP API のリファレンス ドキュメントをご覧ください。
Python
詳細については、Cloud Storage Python API のリファレンス ドキュメントをご覧ください。
Ruby
詳細については、Cloud Storage Ruby API のリファレンス ドキュメントをご覧ください。
REST API
JSON API
- OAuth 2.0 Playground から認証アクセス トークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。手順については、API 認証をご覧ください。
cURL
を使用して JSON API を呼び出し、GET
Bucket リクエストを行います。curl -X GET \ -H "Authorization: Bearer OAUTH2_TOKEN" \ "https://storage.googleapis.com/storage/v1/b/BUCKET_NAME?fields=cors"
ここで
OAUTH2_TOKEN
は、手順 1 で生成したアクセス トークンの名前です。BUCKET_NAME
は、関連するバケットの名前です。例:my-bucket
XML API
- OAuth 2.0 Playground から認証アクセス トークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。手順については、API 認証をご覧ください。
cURL
を使用して XML API を呼び出し、GET
Bucket リクエストを行います。curl -X GET \ -H "Authorization: Bearer OAUTH2_TOKEN" \ "https://storage.googleapis.com/BUCKET_NAME?cors"
ここで
OAUTH2_TOKEN
は、手順 1 で生成したアクセス トークンの名前です。BUCKET_NAME
は、関連するバケットの名前です。例:my-bucket
CORS リクエストのトラブルシューティング
別の生成元から Cloud Storage バケットにアクセスしているときに予期しない動作が発生した場合は、次の手順を試してください。
ターゲット バケットの CORS の構成を確認します。複数の CORS 構成エントリがある場合は、トラブルシューティングに使用するリクエスト値が、1 つの CORS 構成エントリの値にマッピングされていることを確認します。
CORS リクエストを許可しない
storage.cloud.google.com
エンドポイントに対してリクエストを行っていないことを確認します。CORS でサポートされているエンドポイントの詳細については、Cloud Storage CORS のサポートをご覧ください。任意のツールを使用して、リクエストとレスポンスをレビューします。Chrome ブラウザでは、標準のデベロッパー ツールを使用してこの情報を確認できます。
- ブラウザのツールバーで Chrome メニュー
をクリックします。
- [その他のツール] > [デベロッパー ツール] の順に選択します。
- [Network] タブをクリックします。
- アプリケーションまたはコマンドラインから、リクエストを送信します。
- ネットワーク アクティビティが表示されているペインで、リクエストを探します。
- [Name] 列で、リクエストに対応する名前をクリックします。
- [Headers] タブをクリックしてレスポンス ヘッダーを確認するか、[Response] タブをクリックしてレスポンスの内容を表示します。
リクエストとレスポンスが表示されない場合は、ブラウザのキャッシュに以前の失敗したプリフライト リクエストが入っている可能性があります。ブラウザのキャッシュをクリアすると、プリフライトのキャッシュもクリアされます。クリアされない場合は、CORS 構成の
MaxAgeSec
値を低い値に設定し、古いMaxAgeSec
の設定時間待機した後、再度リクエストを試してみてください。指定されていない場合のデフォルト値は 1,800(30 分)です。これにより新しいプリフライト リクエストが実行されて、新しい CORS 構成が取得され、キャッシュ エントリが削除されます。問題をデバッグし終えたら、MaxAgeSec
を高い値に戻して、バケットへのプリフライトのトラフィックを削減します。- ブラウザのツールバーで Chrome メニュー
リクエストに
Origin
ヘッダーがあること、およびヘッダー値がバケットの CORS 構成内のOrigins
値の少なくとも 1 つと一致することを確認します。値のスキーム、ホスト、およびポートが正確に一致している必要があります。受け入れ可能な一致の例を次に示します。http://origin.example.com
はhttp://origin.example.com:80
と一致しています(80 がデフォルトの HTTP ポートであるため)が、https://origin.example.com
、http://origin.example.com:8080
、http://origin.example.com:5151
、http://sub.origin.example.com
とは一致していません。https://example.com:443
はhttps://example.com
と一致しますが、http://example.com
、http://example.com:443
とは一致しません。http://localhost:8080
のみがhttp://localhost:8080
と正確に一致していて、http://localhost:5555
やhttp://localhost.example.com:8080
には一致していません。
リクエストの HTTP メソッド(簡単なリクエストの場合)、または
Access-Control-Request-Method
で指定されたメソッド(プリフライト リクエストの場合)が、バケットの CORS 構成内のMethods
値の少なくとも 1 つと一致していることを確認します。これがプリフライト リクエストの場合は、
Access-Control-Request-Header
ヘッダーが含まれているかどうかを確認します。含まれている場合は、各Access-Control-Request-Header
値がバケットの CORS 構成内のResponseHeader
値と一致することを確認します。プリフライト リクエストが正常に終了し、レスポンスに CORS ヘッダーが含まれるためには、Access-Control-Request-Header
に指定されたすべてのヘッダーが CORS 構成に含まれていることが必要です。
CORS の構成例
次の例は、バケットに設定できる特定の CORS 構成を示しています。
基本的な CORS 構成
App Engine で動的ウェブサイトを実行していて、各ユーザーは your-example-website.appspot.com
でアクセスできるとします。your-example-bucket
という名前の Cloud Storage バケットで、フォント ファイルをホストしています。ウェブサイトでフォントを使用するには、your-example-bucket
に CORS 構成を適用して、ユーザーのブラウザがバケットからリソースをリクエストできるようにする必要があります。以下の構成に基づいているため、プリフライト リクエストは 1 時間有効であり、ブラウザ リクエストが成功するとレスポンスでリソースの Content-Type
が返されます。
gsutil
[ { "origin": ["https://your-example-website.appspot.com"], "method": ["GET"], "responseHeader": ["Content-Type"], "maxAgeSeconds": 3600 } ]
カンマ区切りのリストを使用して、複数の送信元、メソッド、ヘッダーを指定できます。例: "method": ["GET", "PUT"]
CORS 構成の設定方法の詳細については、gsutil cors
のドキュメントをご覧ください。
REST API
JSON API
{ "cors": [ { "origin": ["https://your-example-website.appspot.com"], "method": ["GET"], "responseHeader": ["Content-Type"], "maxAgeSeconds": 3600 } ] }
カンマ区切りのリストを使用して、複数の送信元、メソッド、ヘッダーを指定できます。例: "method": ["GET", "PUT"]
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>
複数の生成元、メソッド、ヘッダーを、それぞれに個別の要素を使用して指定できます。たとえば、<Methods>
要素内に <Method>GET</Method>
と <Method>PUT</Method>
を使用します。
CORS 構成ファイルの一般的な形式については、XML の CORS 構成形式をご覧ください。
CORS 構成を削除する
バケットに設定すると、次の構成ではバケットの現在の CORS 設定がすべて削除されます。
gsutil
[]
CORS 構成の設定方法の詳細については、gsutil cors
のドキュメントをご覧ください。
REST API
JSON API
{ "cors": [] }
CORS 構成ファイルの一般的な形式については、JSON のバケット リソース表現をご覧ください。
XML API
<CorsConfig></CorsConfig>
CORS 構成ファイルの一般的な形式については、XML の CORS 構成形式をご覧ください。
次のステップ
- クロスオリジン リソース シェアリング(CORS)の詳細を確認する。