Contoh konfigurasi CORS

Ringkasan Penyiapan

Halaman ini menampilkan contoh konfigurasi untuk Cross-origin resource sharing (CORS).

Saat menetapkan konfigurasi CORS pada bucket, Anda mengizinkan interaksi antara resource dari asal yang berbeda, sesuatu yang biasanya dilarang untuk mencegah perilaku berbahaya. Untuk mempelajari cara menyusun permintaan yang menetapkan atau mengedit konfigurasi CORS di bucket, lihat petunjuk di Menggunakan CORS.

Perhatikan referensi tambahan berikut:

Konfigurasi CORS dasar

Misalnya, Anda memiliki situs dinamis yang dapat diakses pengguna di your-example-website.appspot.com. Anda memiliki file image yang dihosting di bucket Cloud Storage bernama your-example-bucket. Anda ingin menggunakan image ini di situs Anda. Jadi, Anda harus menerapkan konfigurasi CORS di your-example-bucket yang memungkinkan browser pengguna untuk meminta resource dari bucket. Berdasarkan konfigurasi berikut, permintaan preflight valid selama 1 jam, dan permintaan browser yang berhasil akan menampilkan Content-Type resource dalam respons.

JSON API

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

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>

Upload file langsung (untuk aplikasi web satu halaman)

Gunakan konfigurasi ini saat aplikasi frontend Anda perlu mengupload file langsung ke bucket, yang memerlukan operasi PUT. Ini adalah kebutuhan umum untuk aplikasi web satu halaman, di mana logika aplikasi berada di browser pengguna, bukan di server backend.

Perhatikan bahwa permintaan PUT selalu memicu pemeriksaan pra-penerbangan.

JSON API

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

XML API

<?xml version="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>

Contoh kode sisi klien