Object Storage Service：Konfigurasi Berbagi Sumber Daya Lintas Asal (CORS)

Memuat sumber daya situs web statis

Situs web di https://www.example.com perlu memuat gambar, CSS, dan file JS yang disimpan di bucket OSS.

Langkah 1: Konfigurasikan Aturan CORS

Masuk ke Konsol OSS. Buka halaman Data Security > CORS Settings untuk bucket tujuan dan buat aturan berikut:

Langkah 2: Verifikasi Konfigurasi

Kunjungi https://www.example.com dan pastikan sumber daya OSS seperti gambar dimuat dengan benar tanpa kesalahan CORS di konsol browser.

Unggah file langsung dari antarmuka depan

Pengguna di halaman web https://app.example.com dapat mengunggah file seperti foto profil dan dokumen langsung ke OSS.

Langkah 1: Konfigurasikan Aturan CORS

Masuk ke Konsol OSS. Buka halaman Data Security > CORS Settings untuk bucket tujuan dan buat aturan berikut:

Langkah 2: Verifikasi Konfigurasi

Lakukan operasi unggah di halaman https://app.example.com. Pastikan file berhasil diunggah ke OSS tanpa kesalahan CORS di konsol browser.

Dukung beberapa lingkungan

Beberapa subdomain untuk pengembangan, pengujian, dan produksi seperti dev.example.com dan app.example.com perlu mengakses sumber daya OSS yang sama.

Langkah 1: Konfigurasikan Aturan CORS

Masuk ke Konsol OSS. Buka halaman Data Security > CORS Settings untuk bucket tujuan dan buat aturan berikut:

Langkah 2: Verifikasi Konfigurasi

Lakukan tes akses atau unggah di https://dev.example.com dan https://app.example.com untuk memastikan semua operasi berhasil.

Buat panggilan gaya API dengan otentikasi

Aplikasi antarmuka depan di https://api.example.com perlu mengakses sumber daya OSS yang dilindungi dengan menyertakan header kustom seperti Authorization.

Langkah 1: Konfigurasikan Aturan CORS

Masuk ke Konsol OSS. Buka halaman Data Security > CORS Settings untuk bucket tujuan dan buat aturan berikut:

Langkah 2: Verifikasi Konfigurasi

Inisiasi permintaan dengan header Authorization dari halaman https://api.example.com dan pastikan Anda dapat mengakses sumber daya OSS yang dilindungi.

Praktik terbaik keamanan

Ikuti prinsip hak istimewa minimal.

• Konfigurasikan Origin (AllowedOrigin) dengan tepat: Kecuali jika bucket Anda sepenuhnya publik, jangan atur AllowedOrigin ke *. Tentukan nama domain situs web yang spesifik, seperti https://www.example.com.

• Batasi Allowed Methods (AllowedMethod): Paparkan hanya metode HTTP yang diperlukan untuk operasi bisnis Anda. Jika situs web Anda hanya memerlukan akses baca, konfigurasikan hanya GET dan HEAD.

• Tentukan Allowed Headers (AllowedHeader) secara eksplisit: Untuk permintaan yang membawa informasi otentikasi, seperti header Authorization, hindari penggunaan *. Cantumkan semua header permintaan yang diperlukan secara eksplisit.

Praktik terbaik kinerja

• Optimalkan cache preflight: Tetapkan nilai yang sesuai untuk Waktu Habis Cache (MaxAgeSeconds), seperti 86.400 detik (24 jam). Ini dapat mengurangi jumlah permintaan preflight secara signifikan, sehingga menurunkan latensi dan biaya permintaan.

• Evaluasi dampak dari Vary: Origin: Mengaktifkan Vary: Origin membantu mencegah polusi cache, tetapi meningkatkan kompleksitas caching CDN. Hal ini dapat menyebabkan rasio hit cache yang lebih rendah serta peningkatan lalu lintas kembali ke asal, yang berpotensi menambah biaya dan latensi. Gunakan opsi ini hanya setelah melakukan evaluasi menyeluruh.

Skenario Akselerasi CDN

Jika bucket Anda dipercepat oleh CDN dan diakses melalui nama domain CDN, permintaan lintas asal pertama kali mencapai titik kehadiran (PoP) CDN. Dalam situasi ini, konfigurasikan aturan CORS di konsol CDN, bukan di konsol OSS. Konfigurasi CORS di OSS hanya berlaku untuk permintaan yang dibuat langsung ke nama domain asal OSS. Untuk informasi lebih lanjut, lihat Konfigurasikan Berbagi Sumber Daya Lintas Asal.

Kesalahan: Tidak ada header 'Access-Control-Allow-Origin' pada sumber daya yang diminta.

Kesalahan ini biasanya terjadi karena browser menyimpan respons lama tanpa header CORS atau tidak ada aturan CORS yang sesuai dengan permintaan masuk.

Hapus cache browser Anda dan coba lagi. Jika kesalahan tetap muncul, ikuti langkah-langkah berikut untuk memeriksa apakah aturan CORS telah dikonfigurasi dengan benar:

1. Masuk ke Konsol OSS.

2. Klik Buckets, lalu pilih nama bucket tujuan.

3. Di panel navigasi sebelah kiri, pilih Keamanan Data > Pengaturan CORS.

4. Di halaman Pengaturan CORS, klik Buat Aturan.

5. Di panel Buat Aturan CORS, atur Origin ke *, pilih semua Metode yang Diizinkan, atur Allowed Headers ke *, atur Exposed Headers ke ETag dan x-oss-request-id, atur Cache Timeout (Seconds) ke 0, pilih Vary: Origin, lalu klik OK.

6. Jika masalah masih berlanjut, masuk ke server apa pun dan jalankan perintah berikut untuk melihat header permintaan lintas asal.

   curl -v -o output_file.txt -H 'Origin:[$URL2]' '[$URL1]'

   Catatan

   • [$URL1] adalah URL sumber daya OSS yang diminta.

   • [$URL2] adalah alamat origin yang Anda konfigurasikan dalam aturan CORS.

   Perintah tersebut mengembalikan output serupa.

   

   • Jika respons mencakup header CORS yang sesuai dengan konfigurasi Anda, kemungkinan besar masalah disebabkan oleh caching lokal. Browser mungkin telah menyimpan respons dari permintaan sebelumnya yang tidak termasuk header CORS yang benar. Saat permintaan lintas asal baru dibuat, browser menggunakan respons yang tersimpan, yang menyebabkan pemeriksaan gagal. Coba solusi berikut:

     • Tekan Ctrl+F5 di browser Anda untuk menghapus cache, lalu uji apakah masalah masih ada.

     • Atur Waktu Habis Cache untuk aturan CORS ke 0. Ini mencegah sumber daya disimpan di klien dan memaksa setiap permintaan untuk mengambil informasi otorisasi dari server.

       Catatan

       Anda dapat mengatur cache-control objek ke no-cache saat mengunggahnya. Untuk objek yang sudah diunggah, Anda dapat menggunakan ossutil untuk mengubah pengaturan ini. Untuk informasi lebih lanjut, lihat set-meta (kelola metadata objek).

     • Gunakan CDN untuk mempercepat OSS. Ini memastikan bahwa semua permintaan yang dilayani oleh CDN mengembalikan header CORS.

   • Jika respons berisi dua header CORS atau header yang tidak sesuai dengan konfigurasi OSS Anda, kemungkinan besar masalah disebabkan oleh penggunaan CDN untuk mempercepat OSS:

     1. Masuk ke Konsol CDN, nonaktifkan sementara akselerasi CDN untuk OSS, dan konfirmasikan bahwa masalah lintas asal terpecahkan.

     2. Setelah konfirmasi, klik nama domain tertentu, lalu klik Cache Configuration > HTTP Response Header.

     3. Atur header respons HTTP kustom sesuai kebutuhan.

7. Jika masalah CORS masih belum terselesaikan, lihat Kesalahan umum dan solusi untuk berbagi sumber daya lintas asal OSS (CORS) untuk pemecahan masalah lebih lanjut.

Kesalahan: Header 'Access-Control-Allow-Origin' memiliki nilai '...' yang tidak sama dengan asal yang disediakan.

Server mengembalikan header Access-Control-Allow-Origin, tetapi nilainya tidak sesuai dengan Origin dari permintaan saat ini. Ini sering kali merupakan masalah caching. Saat Anda mengonfigurasi beberapa nama domain situs web untuk mengakses OSS, browser atau CDN mungkin menyimpan izin akses untuk satu situs web dan kemudian salah menyajikannya ke situs lain.

Aktifkan opsi Vary: Origin dalam aturan CORS Anda untuk mencegah konflik cache antara situs web yang berbeda. Sebagai alternatif, hapus cache browser Anda dan coba lagi.

Kesalahan: Respons terhadap permintaan preflight tidak melewati pemeriksaan kontrol akses: Nilai header 'Access-Control-Allow-Origin' dalam respons tidak boleh wildcard '*' ketika mode kredensial permintaan adalah 'include'.

Kesalahan ini terjadi karena kode frontend mengirimkan permintaan dengan kredensial, di mana Access-Control-Allow-Credentials adalah True, tetapi Access-Control-Allow-Origin dikonfigurasikan sebagai karakter wildcard *. Untuk alasan keamanan, browser melarang penggunaan karakter wildcard origin dalam kasus ini untuk mencegah domain apa pun mengakses sumber daya dan memperoleh informasi kredensial. Informasi ini mencakup data sensitif seperti cookie dan header Authorization.

• Untuk menyertakan informasi Kredensial dalam header permintaan, ubah nilai Access-Control-Allow-Origin dari karakter wildcard * menjadi nama domain spesifik (misalnya, https://example.com).

• Jika Anda tidak perlu menyertakan informasi Kredensial dalam header permintaan, Anda dapat mengatur xhr.withCredentials ke false dalam kode frontend Anda dan pastikan bahwa Access-Control-Allow-Credentials diatur ke false di sisi server.

Bagaimana cara saya memperbaiki pemuatan lintas asal lambat dari OSS?

Permintaan lintas asal adalah permintaan HTTP standar yang mencakup header Origin. Kecepatan pemuatan bergantung pada jalur jaringan fisik antara klien dan bucket OSS, bukan pada apakah permintaan itu lintas asal. Sebagai contoh, jika klien berada di China (Hong Kong) dan bucket berada di daratan Tiongkok, ini dianggap sebagai akses jarak jauh. Dalam hal ini, Anda dapat menggunakan endpoint akselerasi transfer OSS untuk mengoptimalkan jalur jaringan. Untuk informasi lebih lanjut, lihat Akselerasi Transfer.