Cara Memperbaiki Masalah CORS di Firebase atau Google Cloud Storage

Saya memperbaiki bug yang sudah lama ditinggalkan dalam proyek saya. Kesalahan sebenarnya cukup sederhana yakni gambar yang disimpan di Firebase Cloud Storage tidak dapat diambil melalui permintaan AJAX. Saya memeriksa konsol JavaScript dan kesalahan ini muncul:

Access to fetch at 'IMAGE-URL-FROM-FIREBASE-CLOUD -STORAGE' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Setelah beberapa upaya, saya mendapat jawaban dari StackOverflow, Firebase Storage and Access-Control-Allow-Origin.

Untuk mengatasi masalah itu, kita perlu mengakses Google Cloud Console. Kemudian, pilih proyek yang ingin saya selesaikan. Aktifkan cloud shell dengan mengklik ikon terminal di sudut kanan atas.

Jendela terminal akan muncul di bagian bawah. Kemudian, jalankan perintah ini di dalam terminal tersebut:

$ nano cors.json

Editor di dalam terminal akan muncul. Ketikkan kode ini ke dalamnya:

[  {    "origin": ["*"],    "method": ["GET"],    "maxAgeSeconds": 3600  }]

Kita dapat mengubah simbol * menjadi URL lain. Misalnya, jika kita ingin gambar hanya dapat diakses dari URL blog ini, Kita dapat mengubah * menjadi https://jefrydco.id.

Kemudian tekan CTRL + X diikuti oleh y.

Setelah itu, jalankan perintah ini:

$ gsutil cors set cors.json gs://URL-BUCKET-PROYEK-KAMU

Jika berhasil, tampilan terminal akan seperti ini:

jefrydco@cloudshell:~ (ID-PROYEK)$ gsutil cors set cors.json gs://URL-BUCKET-PROYEK-KAMUSetting CORS on gs://URL-BUCKET-PROYEK-KAMU/...jefrydco@cloudshell:~ (ID-PROYEK)$

URL bucket proyek dapat ditemukan dari dasbor Firebase pada menu Penyimpanan seperti gambar ini:

Atau dari dasbor Google Cloud Console pada menu Storage seperti gambar ini: