Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
🚫 How to set up CORS with Google Cloud Storage [video version available]

🚫 How to set up CORS with Google Cloud Storage [video version available]

Video thumbnail: How to set up CORS with Google Cloud Storage

About this article

This article describes how to set CORS in Google Cloud Storage (GCS) and make it accessible from a web page using fetch etc. The related resources are shown below.

Workflow

The workflow is shown below.

  1. Creating a bucket
  2. Setting permissions
  3. Uploading an object
  4. CORS settings
  5. Coding preparation
  6. Coding
  7. Operation check

Creating a bucket

Go to the GCS Web Console and create the following bucket.

  • Bucket name: Arbitrary (Example: gcp-storage-cors-(8 digits date))
  • Location type: Region
  • Region: asia-northeast1 (Tokyo)
  • Storage class: Standard
  • Prevent public access: Do not check
  • Access control: uniform
  • Protective tools: None

Setting permissions

Access the details page (object list page) of the created bucket and add the following permissions.

  • Principal: allUsers
  • Role: Storage Legacy Object Read

Uploading an object

Upload the following operation check object by clicking the "Upload file" button on the details page of the created bucket.

  • Name: status.json
  • Content: {"ok": true}

CORS settings

Run the following command in the terminal to prepare the settings.

touch cors.json

Open cors.json in the editor and enter the following content.

Click to go to cors.json

Run the following command in the terminal to set CORS.

gsutil cors set cors.json gs://gcp-storage-cors-00000000

Coding preparation

Run the following command to prepare for coding.

mkdir gcp-storage-cors
cd gcp-storage-cors
npm init -y
npm install --save-dev http-server
touch config.json index.html main.js

Coding

config.json

Open config.json in the editor and enter the public URL of the operation check object. You can also find the public URL from the object details page in the GCS web console.

Click to go to config.example.json

index.html

Open index.html in the editor and enter the following content.

Click to go to index.html

main.js

Open main.js in the editor and enter the following content.

Click to go to main.js

Operation check

Run the following command in the terminal to start the web server.

npx http-server -c-1

Go to http://localhost:8080/ in the browser and check that the following text is shown in the web page.

{"ok":true}

Conclusion

It seems that it will take a few minutes for the CORS settings of GCS to be reflected, so if it does not work, please wait a while and try again. Thank you for reading!

/node_modules/
/config.json
/package-lock.json
# Do not ignore package-lock.json other than gist
{
"url": "https://storage.googleapis.com/gcp-storage-cors-00000000/status.json"
}
gsutil cors set cors.json gs://gcp-storage-cors-00000000
[
{
"origin": ["http://localhost:8080"],
"method": ["GET"],
"responseHeader": ["Content-Type"],
"maxAgeSeconds": 300
}
]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Cloud StorageでCORSを設定する方法</title>
</head>
<body>
<h1>Google Cloud StorageでCORSを設定する方法</h1>
<p>下記に{"ok":true}と表示されたら成功です。</p>
<p id="message"></p>
<script src="main.js"></script>
</body>
</html>
main()
async function main () {
try {
const config = await (await fetch('config.json')).json()
const response = await fetch(config.url)
const text = await response.text()
const message = document.querySelector('#message')
message.innerHTML = text
} catch (err) {
console.error(err)
}
}
{
"name": "gcp-storage-cors",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "http-server -c-1"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"http-server": "^14.1.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment