Browser dapat memblokir permintaan lintas asal ke Object Storage Service (OSS) karena kebijakan asal sama, yang membatasi akses hanya ke protokol, domain, dan port yang identik. Misalnya, halaman di https://www.example.com tidak dapat memuat sumber daya dari https://example-bucket.oss-cn-hangzhou.aliyuncs.com/test.jpg.
Konfigurasikan aturan CORS untuk bucket Anda guna memberi otorisasi kepada situs web tertentu agar dapat mengakses sumber daya OSS secara langsung.
Cara kerja
Permintaan CORS terbagi menjadi dua jenis: permintaan simple (dikirim langsung) dan permintaan preflight (memerlukan pemeriksaan otorisasi sebelum permintaan utama).
Permintaan preflight diperlukan jika salah satu kondisi berikut terpenuhi:
-
Permintaan menggunakan metode selain
GET,HEAD, atauPOST. -
Permintaan menggunakan metode
POSTdenganContent-Typeselaintext/plain,application/x-www-form-urlencoded, ataumultipart/form-data. -
Permintaan menyertakan header kustom, seperti
x-oss-*.
Saat browser mengirimkan permintaan sederhana ke OSS, proses berikut terjadi:
-
Browser menambahkan header
Originke permintaan. HeaderOriginmenentukan asal halaman pemanggil, misalnya,Origin: https://www.example.com. -
OSS memeriksa metode HTTP dan header
Originpermintaan terhadap aturan CORS bucket untuk mencari aturan yang sesuai. Jika ditemukan kecocokan, OSS menyertakan headerAccess-Control-Allow-Origindalam respons. Nilai header ini adalah nilai headerOrigindari permintaan awal. -
Browser menerima respons tersebut. Browser hanya mengizinkan permintaan dilanjutkan jika header
Access-Control-Allow-Originada dan nilainya sesuai dengan domain halaman. Jika tidak, permintaan gagal.
Permintaan preflight menambahkan langkah-langkah berikut sebelum alur permintaan simple. Jika berhasil, proses dilanjutkan seperti pada permintaan simple:
-
Browser mengirim permintaan
OPTIONSyang mencakup metode (Access-Control-Request-Method) dan header (Access-Control-Request-Headers) dari permintaan utama yang dimaksud. -
OSS memeriksa apakah metode dan header dalam permintaan diizinkan berdasarkan konfigurasi CORS. Jika permintaan preflight mencakup metode atau header yang tidak diizinkan oleh aturan, permintaan gagal dan permintaan utama tidak dikirim.
Muat sumber daya website statis
Situs web di https://www.example.com perlu memuat file gambar, CSS, dan JS yang disimpan di bucket OSS.
Langkah 1: Konfigurasi aturan CORS
Masuk ke OSS console. Buka halaman Content Security > CORS untuk bucket tujuan dan buat aturan sebagai berikut:
|
Parameter |
Nilai |
Deskripsi |
|
Origin |
|
Membatasi akses ke situs web ini. |
|
Allowed Methods |
|
|
|
Allowed Headers |
Empty |
Tidak diperlukan — permintaan simple tidak memicu preflight. |
|
Exposed Headers |
|
|
|
Cached Timeout (Seconds) |
86400 |
Menyimpan hasil preflight dalam cache selama 24 jam. |
|
Vary: Origin |
Unchecked |
Tidak diperlukan untuk satu origin spesifik. |
Langkah 2: Verifikasi konfigurasi
Buka https://www.example.com dan pastikan sumber daya OSS, seperti gambar, dimuat dengan benar serta tidak ada error CORS di konsol browser.
Unggah file langsung dari antarmuka depan
Pengguna di halaman web https://app.example.com mengunggah file, seperti avatar dan dokumen, langsung ke OSS.
Langkah 1: Konfigurasi aturan CORS
Masuk ke OSS console. Buka halaman Content Security > CORS untuk bucket tujuan dan buat aturan sebagai berikut:
|
Parameter |
Nilai |
Deskripsi |
|
Origin |
|
Membatasi unggahan hanya untuk aplikasi resmi ini. |
|
Allowed Methods |
|
|
|
Allowed Headers |
|
Unggahan langsung menggunakan tanda tangan temporary (presigned URLs) alih-alih header |
|
Exposed Headers |
|
|
|
Cached Timeout (Seconds) |
600 |
Cache 10 menit menyeimbangkan pengurangan preflight dengan pembaruan konfigurasi yang cepat. |
|
Vary: Origin |
Checked |
Mencegah polusi cache CDN untuk penerapan multi-domain potensial. |
Langkah 2: Verifikasi konfigurasi
Lakukan operasi unggah di halaman https://app.example.com dan pastikan file berhasil diunggah ke OSS serta tidak ada error CORS di konsol browser.
Dukungan untuk 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: Konfigurasi aturan CORS
Masuk ke OSS console. Buka halaman Content Security > CORS untuk bucket tujuan dan buat aturan sebagai berikut:
|
Parameter |
Nilai |
Deskripsi |
|
Origin |
|
Karakter wildcard |
|
Allowed Methods |
|
Mendukung pembacaan dan unggahan di semua lingkungan. |
|
Allowed Headers |
|
Karakter wildcard |
|
Exposed Headers |
|
Mendukung validasi unduhan dan umpan balik hasil unggahan. |
|
Cached Timeout (Seconds) |
3600 |
Cache 1 jam menyeimbangkan performa dengan fleksibilitas debugging. |
|
Vary: Origin |
Checked |
Wajib. Menginstruksikan CDN untuk menyimpan cache respons berdasarkan |
Langkah 2: Verifikasi konfigurasi
Lakukan pengujian akses atau unggah di kedua halaman https://dev.example.com dan https://app.example.com untuk memastikan semua operasi berhasil.
Lakukan panggilan bergaya API dengan autentikasi
Aplikasi antarmuka depan di https://api.example.com perlu mengakses sumber daya OSS yang dilindungi dengan menyertakan header kustom seperti Authorization.
Langkah 1: Konfigurasi aturan CORS
Masuk ke OSS console. Di bucket tujuan, buka halaman Content Security > CORS dan buat aturan sebagai berikut:
|
Parameter |
Nilai |
Deskripsi |
|
Origin |
|
Untuk permintaan yang menyertakan informasi autentikasi, origin harus berupa domain tepercaya yang tepat. |
|
Allowed Methods |
|
Mendukung pembacaan, pembaruan, dan penghapusan sumber daya privat. |
|
Allowed Headers |
|
Jangan gunakan |
|
Exposed Headers |
|
Memberikan pengidentifikasi verifikasi untuk operasi yang berhasil dan ID untuk troubleshooting. |
|
Cached Timeout (Seconds) |
600 |
Cache lebih pendek (10 menit) memastikan perubahan kebijakan keamanan diterapkan dengan cepat. |
|
Vary: Origin |
Select |
Memastikan CDN menyimpan cache respons secara terpisah per origin. |
Langkah 2: Verifikasi konfigurasi
Kirim permintaan dengan header Authorization dari halaman https://api.example.com dan pastikan Anda dapat mengakses sumber daya OSS yang dilindungi.
Terapkan di produksi
Praktik keamanan terbaik
Ikuti prinsip hak istimewa minimal.
-
Konfigurasi
Origin (AllowedOrigin)secara tepat: Hindari menyetel*untukSourceskecuali bucket Anda sepenuhnya publik. Tentukan domain eksplisit, sepertihttps://www.example.com. -
Batasi
Allowed Methods: Ekspos hanya metode HTTP yang dibutuhkan aplikasi Anda. Untuk situs read-only, konfigurasikan hanyaGETdanHEAD. -
Tentukan
Allowed Headerssecara eksplisit: Untuk permintaan terautentikasi (dengan headerAuthorization), jangan gunakan*. Cantumkan semua header permintaan yang diperlukan secara eksplisit.
Praktik performa terbaik
-
Optimalkan cache preflight: Nilai
MaxAgeSecondsyang wajar, seperti86400detik (24 jam), secara signifikan mengurangi permintaan preflight, sehingga menurunkan latensi dan biaya. -
Evaluasi dampak
Vary: Origin: MengaktifkanVary: Originmenyelesaikan masalah cache poisoning tetapi meningkatkan kompleksitas caching CDN. Hal ini dapat menurunkan rasio hit cache dan meningkatkan lalu lintas kembali ke asal (biaya dan latensi tambahan). Aktifkan hanya setelah mengevaluasi pola lalu lintas Anda.
Akselerasi CDN
Jika bucket Anda dipercepat oleh Alibaba Cloud CDN dan diakses melalui domain CDN, permintaan lintas asal akan pertama kali mencapai Point of Presence (PoP) CDN. Anda harus mengonfigurasi aturan CORS di konsol CDN, bukan di konsol OSS. Konfigurasi CORS di OSS hanya berlaku untuk permintaan yang langsung ditujukan ke domain origin OSS. Untuk detailnya, lihat Konfigurasi Berbagi Sumber Daya Lintas Asal (CORS).
Parameter aturan CORS
Anda dapat mengonfigurasi hingga 20 aturan CORS untuk setiap bucket. OSS mengevaluasi aturan secara berurutan dari atas ke bawah dan menerapkan aturan pertama yang cocok dengan permintaan. Setelah ditemukan kecocokan, OSS tidak memeriksa aturan berikutnya.
|
Parameter |
Wajib |
Deskripsi |
|
Origin (AllowedOrigin) |
Ya |
Menentukan website (domain asal) yang diizinkan membuat permintaan lintas asal ke sumber daya OSS.
|
|
Allowed Methods (AllowedMethod) |
Ya |
Menentukan metode HTTP yang diizinkan.
|
|
Allowed Headers (AllowedHeader) |
Tidak |
Berlaku untuk permintaan preflight dan menentukan header HTTP mana yang dapat disertakan dalam permintaan aktual.
|
|
Exposed Headers (ExposeHeader) |
Tidak |
Menentukan header respons OSS mana yang dapat diakses oleh JavaScript sisi klien.
|
|
Cached Timeout (MaxAgeSeconds) |
Tidak |
Menentukan durasi dalam detik yang diizinkan browser untuk menyimpan cache hasil permintaan preflight
|
|
Vary: Origin |
Tidak |
Menentukan apakah akan menambahkan header respons HTTP
Penting
Mengaktifkan opsi ini dapat menurunkan rasio hit cache CDN. |
FAQ
Error: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Error ini biasanya berarti browser telah menyimpan cache respons lama tanpa header CORS, atau tidak ada aturan CORS yang cocok dengan permintaan masuk.
Bersihkan cache browser Anda dan uji ulang. Jika error tetap muncul, verifikasi aturan CORS Anda:
-
Di panel navigasi kiri, pilih Content Security > CORS.
-
Di halaman CORS, klik Create Rule.
-
Di panel Create CORS Rule, atur Origin menjadi
*, pilih semua Allowed Methods, atur Allowed Headers menjadi*, atur Exposed Headers menjadiETagdanx-oss-request-id, atur Cache Timeout (Seconds) menjadi 0, pilih Vary: Origin, lalu klik OK. -
Jika masalah tetap 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.
Sistem menampilkan output yang mirip dengan berikut.

-
Jika respons menyertakan header CORS yang sesuai, kemungkinan besar masalahnya adalah cache browser atau jaringan. Permintaan non-CORS sebelumnya mungkin telah disimpan dalam cache lokal, dan permintaan lintas asal berikutnya mengambil respons cache ini alih-alih mendapatkan respons baru dari server. Coba solusi berikut:
-
Tekan Ctrl+F5 di browser Anda untuk membersihkan cache, lalu uji apakah masalah masih berlanjut.
-
Atur Cached-Seconds menjadi 0 dalam aturan CORS. Ini memaksa setiap permintaan untuk mengambil ulang otorisasi CORS dari server.
CatatanAnda dapat mengatur
cache-controlobjek menjadino-cachesaat 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, memastikan semua permintaan yang dilayani CDN menyertakan 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:
-
Masuk ke CDN console dan nonaktifkan sementara akselerasi CDN untuk nama domain guna memastikan masalah lintas asal terselesaikan.
-
Setelah dikonfirmasi, klik nama domain tertentu, lalu buka Cache Configuration > Node HTTP Response Header.
-
Atur header respons HTTP kustom sesuai kebutuhan.
-
-
-
Jika masalah CORS masih belum terselesaikan, lihat Error umum dan solusi untuk CORS OSS untuk troubleshooting lebih lanjut.
Error: The 'Access-Control-Allow-Origin' header has a value '...' that is not equal to the supplied origin.
Server mengembalikan header Access-Control-Allow-Origin, tetapi nilainya tidak sesuai dengan Origin permintaan. Hal ini sering kali merupakan masalah caching — browser atau CDN menyimpan cache respons untuk satu domain dan melayaninya ke domain lain.
Aktifkan opsi Vary: Origin dalam aturan CORS Anda untuk mencegah konflik cache antarwebsite berbeda, atau bersihkan cache browser Anda sebelum mencoba lagi.
Error: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
Error ini terjadi karena antarmuka depan mengirim permintaan ber-kredensial (Access-Control-Allow-Credentials bernilai True), tetapi Access-Control-Allow-Origin diatur ke *. Browser melarang kombinasi ini untuk mencegah situs mana pun mengakses data sensitif seperti cookie atau token Authorization.
-
Jika Anda memerlukan kredensial, ubah
Sourcesdari*menjadi domain spesifik (misalnya,https://example.com). -
Jika Anda tidak memerlukan kredensial, atur
xhr.withCredentialsmenjadifalsedalam kode antarmuka depan Anda dan pastikanAccess-Control-Allow-Credentialsbernilaifalsedi server.
Bagaimana cara meningkatkan kecepatan pemuatan lintas asal yang lambat dari OSS?
Kecepatan pemuatan lintas asal bergantung pada latensi jaringan antara klien dan bucket OSS. Permintaan lintas asal menyertakan header Origin. Untuk akses jarak jauh (misalnya, China (Hong Kong) ke daratan Tiongkok), gunakan titik akhir Transfer Acceleration untuk mengoptimalkan jalur jaringan.
Transfer Acceleration mengoptimalkan jalur jaringan untuk meningkatkan kecepatan transfer data global.