tatsuyasusukida/!README-gcp-storage-cors.md

## !README-gcp-storage-cors.md

      
    Raw
  

              !README-gcp-storage-cors.md
            
          
    🚫 How to set up CORS with Google Cloud Storage [video version available]


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.

Source code
日本語版 / Japanese version
Video version

Workflow

The workflow is shown below.

Creating a bucket
Setting permissions
Uploading an object
CORS settings
Coding preparation
Coding
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!

  
## .gitignore
/node_modules/
/config.json
/package-lock.json
# Do not ignore package-lock.json other than gist

## config.example.json
{
  "url": "https://storage.googleapis.com/gcp-storage-cors-00000000/status.json"
}

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

## cors.json
[
    {
      "origin": ["http://localhost:8080"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 300
    }
]

## index.html
<!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.js
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)
  }
}

## package.json
{
  "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"
  }
}

## status.json
{"ok":true}
	/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"
	}
	[
	{
	"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"
	}
	}