OverviewSetup

This page shows example configurations forCross-origin resource sharing (CORS).

When you set a CORS configuration on a bucket, you allow interactionsbetween resources from different origins, something that is normally prohibitedin order to prevent malicious behavior. To learn how to structure a requestthat sets or edits a CORS configuration on a bucket, see the instructions inUsing CORS.

Note the following additional resources:

• For the generalized format of a CORS configuration file, see thebucket resource representation for JSON or theCORS configuration format for XML.

• When sending requests using the Google Cloud CLI, use thecorrect CORS file configuration structure.

Basic CORS configuration

Say you have a dynamic website which users canaccess atyour-example-website.appspot.com. You have an image file hosted in aCloud Storage bucket namedyour-example-bucket. You'd like to usethe image on your website, so you must apply a CORS configuration onyour-example-bucket that enables your users' browsers to request resourcesfrom the bucket. Based on the following configuration, preflight requests arevalid for 1 hour, and successful browser requests return theContent-Type ofthe resource in the response.

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

<?xmlversion="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>

Direct file uploads (for single-page applications)

Use this configuration when your frontend application needs to upload filesdirectly to a bucket, which requires aPUT operation. This is a common needfor single-page applications, where the application logic lives in the user'sbrowser instead of in a backend server.

Note thatPUT requests always trigger a preflight check.

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

<?xmlversion="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>

Client-side code sample

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

Authenticated data access

Use this configuration if your application sends a bearer token or aGoogle Identity header to access protected (non-public) objects.

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

<?xmlversion="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>

Allowing access for multiple matching subdomains

Use this configuration if you have multiple development or staging environmentsthat need access to the same bucket. Using the wildcard* when specifyinga subdomain lets you match multiple subdomains. For example,*.example.comcan be used to matchtest.example.com andprod.example.com.

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

<?xmlversion="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>

Allowing access for any origin

Use this configuration for public-facing data where restriction isn't required.Specifying the wildcard* as the origin allows requests from any origin.Note that with this configuration, requests to the bucket will fail if theclient setscredentials: include in their request.

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

<?xmlversion="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>

CORS configuration structure for gcloud CLI

Thegcloud storage buckets update --cors-file command expects a filecontaining only the list of CORS rules. When specifying a CORS configurationto beset using the Google Cloud CLI, remove the top level"cors":wrapper from the JSON file.

For example, this gcloud CLI command sets a CORS configuration ona bucket:

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

This is an example configuration forexample_cors_file.json that uses thecorrect structure for thegcloud storage buckets update --cors-file command.

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

What's next

• Learn more aboutCross Origin Resource Sharing (CORS).
• Set and view the CORS configuration on a bucket.