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

JavaScript

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

Akses data yang diautentikasi

Gunakan konfigurasi ini jika aplikasi Anda mengirim token pembawa atau header IdentitasGoogle untuk mengakses objek yang dilindungi (non-publik).

JSON API

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

XML API

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

Mengizinkan akses untuk beberapa subdomain yang cocok

Gunakan konfigurasi ini jika Anda memiliki beberapa lingkungan pengembangan atau staging yang memerlukan akses ke bucket yang sama. Dengan menggunakan karakter pengganti * saat menentukan subdomain, Anda dapat mencocokkan beberapa subdomain. Misalnya, *.example.com dapat digunakan untuk mencocokkan test.example.com dan prod.example.com.

JSON API

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

XML API

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

Mengizinkan akses untuk semua origin

Gunakan konfigurasi ini untuk data yang dapat diakses publik dan tidak memerlukan pembatasan. Menentukan karakter pengganti * sebagai origin akan mengizinkan permintaan dari origin mana pun. Perhatikan bahwa dengan konfigurasi ini, permintaan ke bucket akan gagal jika klien menetapkan credentials: include dalam permintaannya.

JSON API

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

XML API

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

Struktur konfigurasi CORS untuk gcloud CLI

Perintah gcloud storage buckets update --cors-file mengharapkan file yang hanya berisi daftar aturan CORS. Saat menentukan konfigurasi CORS yang akan ditetapkan menggunakan Google Cloud CLI, hapus wrapper "cors": tingkat teratas dari file JSON.

Misalnya, perintah gcloud CLI ini menetapkan konfigurasi CORS di bucket:

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

Berikut contoh konfigurasi untuk example_cors_file.json yang menggunakan struktur yang benar untuk perintah gcloud storage buckets update --cors-file.

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

Langkah berikutnya