Konfigurasi CORS untuk CDN dengan header respons HTTP - CDN

Setelah menambahkan layanan ke Alibaba Cloud CDN, Anda dapat mengaktifkan akses lintas asal dengan mengonfigurasi header respons HTTP pada POP.

Apa itu berbagi sumber daya lintas asal?

Berbagi sumber daya lintas asal (CORS) adalah mekanisme standar yang memungkinkan halaman web mengakses sumber daya dari asal (domain, protokol, atau port) yang berbeda dari asalnya sendiri. Mekanisme ini menyediakan cara aman untuk mengizinkan transfer data lintas asal. Untuk informasi selengkapnya, lihat Cross-Origin Resource Sharing (CORS).

Catatan

T: Apa yang terjadi jika CORS tidak diaktifkan secara default pada CDN?

Secara default, CDN tidak mengaktifkan berbagi sumber daya lintas asal (CORS). Tanpa konfigurasi ini, browser menerapkan kebijakan asal sama dan memblokir permintaan lintas asal, sehingga mencegah situs web lain memuat sumber daya Anda.

Mengapa perlu mengonfigurasi berbagi sumber daya lintas asal?

Karena pembatasan keamanan, browser biasanya menerapkan kebijakan asal sama, yang membatasi permintaan untuk memuat dan mengakses sumber daya dari domain, subdomain, protokol, atau port yang berbeda. Misalnya, example.com tidak dapat mengakses sumber daya di example.org. Dengan mengonfigurasi berbagi sumber daya lintas asal (CORS), Anda dapat mengatur header respons terkait pada server CDN. Jika permintaan mencakup header yang sesuai dengan aturan yang diizinkan, server akan mengembalikan header respons HTTP yang sesuai, sehingga memungkinkan sumber daya lintas asal dimuat dan diakses.

Cara kerja

CORS dikonfigurasi pada server origin

Dengan CORS dikonfigurasi pada CDN

Catatan penggunaan

Jika Anda menggunakan bucket OSS sebagai server origin, konfigurasi CORS di konsol CDN akan menggantikan konfigurasi CORS di konsol OSS. Untuk informasi lebih lanjut tentang cara mengonfigurasi CORS di konsol OSS, lihat Setel aturan CORS.
Jika Anda menggunakan server on-premises atau instance ECS sebagai server origin, kami menyarankan agar Anda memisahkan konten statis dan dinamis serta menggunakan CDN untuk mempercepat pengiriman file statis. Fitur CORS yang dikonfigurasi di konsol CDN hanya berlaku untuk file statis.

Aktifkan berbagi sumber daya lintas asal

Masuk ke CDN console.
Di panel navigasi kiri, klik Domain Names.
Pada halaman Domains, temukan domain yang ingin Anda kelola dan klik Actions di kolom Manage.

Klik Cache, pilih tab Modify Outgoing Response Header, lalu atur origin dan metode yang diizinkan untuk permintaan lintas asal.

Atur origin untuk permintaan lintas asal

Klik Customize, konfigurasi parameter seperti dijelaskan dalam tabel berikut, lalu klik OK.

Parameter	Deskripsi	Contoh
Operation	Atur parameter ini ke Add untuk mengaktifkan fitur validasi CORS.	Add
Response Header	Anda harus mengatur `Access-Control-Allow-Origin` untuk menggunakan fitur validasi lintas asal.	Access-Control-Allow-Origin
Header Value	Jika validasi CORS dinonaktifkan: Anda hanya dapat menentukan wildcard atau satu origin. Wildcard ``: Mengizinkan origin apa pun mengakses sumber daya. Single origin: Mengizinkan sumber daya hanya diakses dari origin tertentu (nama domain). Jika validasi CORS diaktifkan:* Anda dapat menentukan wildcard, satu origin, beberapa origin, atau domain wildcard. Wildcard ``: Mengizinkan sumber apa pun mengakses sumber daya. Single origin: Mengizinkan sumber daya hanya diakses dari origin tertentu (nama domain). Multiple specified origins:* Konfigurasikan beberapa origin spesifik (nama domain), dipisahkan dengan koma `,`, untuk mengizinkan origin tersebut mengakses sumber daya. Wildcard domain: Tentukan domain wildcard untuk mengizinkan akses dari semua origin yang cocok dengan pola tersebut.	`` `http://www.aliyun.com` `https://aliyun.com,http://www.aliyun.com` `http://.aliyun.com`
Allow Duplicates	Yes: Header dari server origin dipertahankan, dan header baru dengan nama yang sama juga ditambahkan ke respons. No: Header baru menggantikan header dengan nama yang sama dari server origin. Penting Pengaturan Allow Duplicates dan CORS Validation saling eksklusif. Jika Anda mengatur Allow Duplicates ke Yes, validasi CORS dinonaktifkan.	No
CORS	CORS hanya dapat dikonfigurasi ketika Operation diatur ke Add, dan Response Header diatur ke "Access-Control-Allow-Origin". CORS dapat diatur ke Disable atau Enable. Nilai default-nya adalah Disable. Disable: POP CDN tidak memvalidasi header `Origin` dalam permintaan masuk dan selalu mengembalikan nilai `Access-Control-Allow-Origin` yang dikonfigurasi. Enable: POP CDN memvalidasi permintaan lintas asal berdasarkan aturan berikut dan merespons dengan nilai `Access-Control-Allow-Origin` yang sesuai. Response Header: Jika Response Header diatur ke ``, POP selalu mengembalikan `Access-Control-Allow-Origin:`, terlepas dari apakah permintaan pengguna berisi header `Origin` atau nilainya. Response Header: Response Header diatur ke satu atau beberapa origin spesifik, dipisahkan dengan koma (`,`). Jika nilai header `Origin` dalam permintaan pengguna persis sesuai dengan salah satu origin yang dikonfigurasi, POP merespons dengan origin tersebut sebagai nilai header `Access-Control-Allow-Origin`. Jika tidak ditemukan kecocokan, POP tidak menambahkan header CORS ke respons. Response Header: Jika Response Header diatur ke domain wildcard, POP memeriksa apakah header `Origin` dalam permintaan cocok dengan pola wildcard. Jika Anda mengatur Enable ke Header Value dan nama domain dalam bidang Header Value berisi tanda hubung (`-`), Anda harus melakukan escape dengan mengganti `-` menjadi `%-`. Contoh: Nilai header asli: `http://doc.aliyun-example.com`. Nilai header yang di-escape: `http://doc.aliyun%-example.com`.	Enable

Atur metode untuk permintaan lintas asal

Klik Customize, konfigurasi parameter seperti dijelaskan dalam tabel berikut, lalu klik OK.

Parameter	Deskripsi	Contoh
Operation	Atur parameter ini ke Add.	Add
Response Header	Harus diatur ke `Access-Control-Allow-Methods`	Access-Control-Allow-Methods
Header Value	Mendukung metode permintaan `GET, POST, dan PUT`. Jika Anda perlu menambahkan `GET, POST, dan PUT` sekaligus, pisahkan dengan koma `,`.	`GET`
Allow Duplicates	Yes: Header dari server origin dipertahankan, dan header baru dengan nama yang sama juga ditambahkan ke respons. No: Header baru menggantikan header dengan nama yang sama dari server origin.	No

Catatan

T: Setelah menambahkan header respons CORS, apakah berlaku untuk sumber daya statis yang sudah di-cache sebelumnya?

Tidak. CDN menyimpan cache seluruh respons HTTP, termasuk header. Untuk menerapkan header CORS baru ke konten yang sudah di-cache, Anda harus melakukan purge URL sumber daya tersebut. Jika tidak, pengguna akan terus menerima respons lama dari cache.

Contoh konfigurasi

Contoh 1

Jika nilai header respons untuk CORS diatur ke satu atau beberapa origin spesifik yang dipisahkan dengan koma (,):

Jika nilai header Origin dalam permintaan pengguna persis sesuai dengan salah satu origin yang ditentukan, POP CDN merespons dengan header CORS yang sesuai.
Jika tidak ditemukan kecocokan persis, header CORS tidak disertakan dalam respons.

Pada CDN/, atur: Access-Control-Allow-Origin: http://example.com,https://aliyundoc.com.

Header Origin permintaan pengguna adalah http://example.com, dan POP CDN merespons dengan Access-Control-Allow-Origin: http://example.com.
Header Origin dalam permintaan pengguna adalah https://aliyundoc.com, dan node CDN merespons dengan Access-Control-Allow-Origin: https://aliyundoc.com.
Node CDN tidak akan merespons permintaan pengguna dengan header Origin http://aliyundoc.com (karena ketidaksesuaian protokol: permintaan pengguna menggunakan HTTP, sedangkan CDN dikonfigurasi untuk HTTPS).
Jika header Origin permintaan adalah http://aliyun.com, POP CDN tidak akan merespons (ketidaksesuaian domain).

Contoh 2

Jika nilai header respons untuk CORS diatur ke domain wildcard, POP memeriksa apakah nilai Origin dalam header permintaan cocok dengan pola wildcard.

Pada CDN/, atur: Access-Control-Allow-Origin: http://*.aliyundoc.com.

Permintaan pengguna berisi header Origin http://demo.aliyundoc.com, dan POP CDN merespons dengan Access-Control-Allow-Origin: http://demo.aliyundoc.com.
Jika header Origin permintaan adalah http://demo.example.com, POP CDN tidak akan merespons karena nama domain tidak cocok.
Node CDN tidak merespons permintaan pengguna dengan header Origin https://demo.aliyundoc.com karena permintaan menggunakan protokol HTTPS, tetapi CDN dikonfigurasi dengan protokol HTTP.

Catatan

T: Bagaimana cara menggunakan curl untuk memverifikasi bahwa header Access-Control-Allow-Origin dari CDN berfungsi?

Kirim permintaan GET dengan header Origin menggunakan curl -svo /dev/null dan periksa output verbose untuk header respons. Jika header Access-Control-Allow-Origin muncul dalam respons dengan nilai yang diharapkan (misalnya, * atau domain yang Anda tentukan), konfigurasi CORS Anda berfungsi. Jika header tidak ada, tinjau aturan header respons kustom Anda di konsol CDN dan pengaturan CORS server origin Anda.

curl -svo /dev/null https://img.anleme.cc/agent/dl1.jpg -H 'origin:https://am.anleme.cc'

FAQ

Mengapa kesalahan lintas asal masih terjadi setelah saya mengonfigurasi header respons Access-Control-Allow-Origin, dan header tersebut tidak muncul dalam respons?

Catatan

T: Apakah konfigurasi CORS CDN mendukung beberapa domain wildcard yang dipisahkan koma?

Tidak. Saat validasi CORS diaktifkan pada CDN, Anda hanya dapat mengonfigurasi satu domain wildcard. Sebagai alternatif, Anda dapat mencantumkan beberapa domain eksak (non-wildcard) yang dipisahkan koma. Anda tidak dapat menentukan daftar domain wildcard ganda yang dipisahkan koma, seperti https://*.iflyvoice.cn,https://*.xxx.com.

Catatan

T: Mengapa file font yang diakses melalui domain yang dipercepat CDN memicu masalah CORS, sedangkan file video tidak?

Perilaku ini ditentukan oleh jenis sumber daya dan kebijakan keamanan browser. Secara default, file video (seperti MP4 atau WebM) yang dimuat melalui tag <video> tidak tunduk pada pembatasan CORS kecuali atribut crossorigin secara eksplisit ditambahkan. Sebaliknya, file font (seperti .ttf atau .woff) selalu tunduk pada validasi CORS wajib oleh browser, terlepas dari cara pemuatannya. Oleh karena itu, meskipun kedua jenis sumber daya dihosting di domain yang sama, permintaan font akan gagal tanpa kebijakan CORS yang valid, sedangkan permintaan video sering berhasil. Perbedaan ini berasal dari kebijakan keamanan browser standar untuk jenis konten yang berbeda.

Catatan

T: Bagaimana cara memverifikasi bahwa konfigurasi CORS CDN saya efektif?

Anda dapat menggunakan metode berikut untuk verifikasi:

Uji kembali untuk melihat apakah kesalahan lintas asal masih berlanjut.
Gunakan perintah curl -svo /dev/null untuk mengirim permintaan GET dengan header Origin tertentu dan periksa header respons dalam output verbose. Contohnya:
curl -svo /dev/null https://img.anleme.cc/agent/dl1.jpg -H 'origin:https://am.anleme.cc'
Berikan domain pengujian kepada dukungan teknis untuk bantuan.

Catatan

T: Saat mempercepat bucket OSS dengan CDN, bagaimana cara meneruskan konfigurasi CORS dari origin OSS?

Untuk mengaktifkan transmisi langsung konfigurasi CORS dari server origin OSS, permintaan awal ke CDN harus menyertakan header Origin. Hal ini memungkinkan CDN mengambil dari origin dan menyimpan cache header respons Access-Control-Allow-Origin. Namun, mekanisme caching ini dapat menyebabkan masalah CORS untuk permintaan berikutnya yang memiliki Origin berbeda atau tanpa header Origin. Praktik terbaik yang direkomendasikan adalah mengonfigurasi header CORS langsung di konsol CDN menggunakan fitur Modify Outgoing Request Header di Cache Settings, alih-alih mengandalkan transmisi langsung.

Catatan

T: Jika beberapa domain CDN dikaitkan dengan bucket OSS yang sama, dapatkah saya mengonfigurasi aturan CORS sekali di OSS dan secara otomatis diwariskan ke semua domain CDN?

Tidak. Karena POP CDN menyimpan cache header respons dan perilaku ini dipengaruhi oleh apakah permintaan awal berisi header Origin, mengandalkan konfigurasi transmisi langsung dari OSS dapat menyebabkan kesalahan CORS yang tidak konsisten. Praktik terbaik adalah menambahkan header CORS menggunakan fitur Modify Outgoing Request Header untuk memastikan perilaku yang benar dan stabil.