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 resource 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 satu halaman)

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

Perhatikan bahwa permintaan PUT selalu memicu pemeriksaan preflight.

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 Google Identity 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. Menggunakan karakter pengganti * saat menentukan subdomain memungkinkan Anda 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 origin apa pun

Gunakan konfigurasi ini untuk data yang dapat diakses publik dan tidak memerlukan pembatasan. Menentukan karakter pengganti * sebagai origin memungkinkan 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 tingkat atas "cors": 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 adalah 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