Konfigurasikan CORS menggunakan header respons HTTP - ApsaraVideo VOD

ApsaraVideo VOD mendukung berbagi sumber daya lintas asal (CORS). Anda dapat menambahkan header respons HTTP kustom untuk mengaktifkan CORS. Topik ini menjelaskan cara mengonfigurasi CORS di ApsaraVideo VOD.

Apa itu CORS?

Berbagi sumber daya lintas asal (CORS) adalah solusi standar lintas asal yang disediakan oleh HTML5 untuk memungkinkan halaman web mengakses dan memuat sumber daya dari server asal yang berbeda. Ini memastikan keamanan transmisi data. Untuk informasi lebih lanjut, lihat Berbagi Sumber Daya Lintas Asal (CORS).

Manfaat

Untuk alasan keamanan, browser menggunakan kebijakan asal yang sama. Ini membatasi halaman web untuk mengirim permintaan guna mengakses dan memuat sumber daya dari domain atau subdomain yang berbeda, atau melalui protokol atau port yang berbeda. Sebagai contoh, example.com tidak dapat mengakses sumber daya pada example.org. Saat mengonfigurasi CORS, Anda dapat menentukan header respons pada server CDN. Jika permintaan untuk mengakses sumber daya CDN membawa header yang sesuai dengan aturan yang diizinkan, sumber daya lintas asal dapat dimuat dan diakses.

Cara kerja CORS

CORS dinonaktifkan

Klien mengirim permintaan untuk http://example.com/index.html ke example.com.
example.com mengembalikan file index.html ke klien. URL file tersebut berisi URL ke sumber daya dari server asal lain: http://example.org/image_01.png.
Klien mengirim permintaan untuk http://example.org/image_01.png ke example.org.
example.org mengembalikan header lintas asal, seperti Access-Control-Allow-Origin: *.
Klien menerima respons dan browser memeriksa nilai header. Nilai header adalah asterisk (*), yang menunjukkan bahwa permintaan lintas asal dari semua asal diizinkan. Kemudian, browser menampilkan respons.

CORS diaktifkan

Klien mengirim permintaan untuk http://example.com/index.html ke CDN.
CDN mengembalikan file index.html ke klien. URL file tersebut berisi URL ke sumber daya dari server asal lain: http://example.org/image_01.png.
Klien mengirim permintaan untuk http://example.org/image_01.png ke CDN. Permintaan tersebut mencakup header Origin:http://example.com.
CDN menerima permintaan dan kemudian membandingkan nilai header Origin dalam permintaan dengan nilai yang dikonfigurasi untuk Access-Control-Allow-Origin. Anda dapat menentukan satu atau lebih nilai, atau nama domain wildcard untuk Access-Control-Allow-Origin. Access-Control-Allow-Origin hanya dikembalikan ke klien jika nilai header sebelumnya cocok.
CDN mengembalikan header lintas asal, seperti Access-Control-Allow-Origin:http://example.com, ke klien.
Klien menerima respons dan browser memeriksa nilai header. Nilai header adalah http://example.com, yang menunjukkan bahwa permintaan lintas asal dari http://example.com diizinkan. Kemudian, browser menampilkan respons.

Aktifkan CORS

Masuk ke Konsol ApsaraVideo VOD.
Di panel navigasi di sebelah kiri, pilih Configuration Management > CDN Configuration > Domain Names.
Di halaman Domain Names, temukan nama domain yang ingin Anda kelola dan klik Configure.
Di pohon navigasi di sebelah kiri, klik Cache.
Klik tab Custom HTTP Response Headers.
Klik Add. Di kotak dialog yang muncul, tentukan parameter-parameter yang diperlukan.

Atur Operation menjadi Add, Response Header menjadi Access-Control-Allow-Origin, dan Allow Duplicates menjadi Not Allowed. Kemudian, aktifkan CORS dan klik OK. Gambar berikut menunjukkan konfigurasi contoh.

Konfigurasi CORS 1

Parameter	Contoh
Operation	Add
Response Header	Access-Control-Allow-Origin
Header Value	* Catatan
Allow Duplicates	No Catatan Dalam contoh ini, nilai Tidak Diizinkan digunakan. Anda dapat mengonfigurasi parameter ini berdasarkan kebutuhan bisnis Anda. Penting
CORS	Enable Catatan

Atur Operation menjadi Add, Response Header menjadi Access-Control-Allow-Methods, dan Allow Duplicates menjadi Not Allowed. Kemudian, klik OK. Gambar berikut menunjukkan konfigurasi contoh.

Konfigurasi CORS 2

Parameter	Contoh
Operation	Add
Response Header	Access-Control-Allow-Methods
Header Value	GET, POST, atau PUT Catatan
Allow Duplicates	No Catatan Dalam contoh ini, nilai Tidak Diizinkan digunakan. Anda dapat mengonfigurasi parameter ini berdasarkan kebutuhan bisnis Anda.

Contoh

Contoh 1

Jika Anda menetapkan header Access-Control-Allow-Origin ke satu atau lebih nilai yang dipisahkan oleh koma (,):

Jika nilai header Origin dalam permintaan pengguna cocok dengan nilai header Access-Control-Allow-Origin, nilai header Access-Control-Allow-Origin yang cocok akan dikembalikan.
Jika nilai header Origin dalam permintaan pengguna tidak cocok dengan nilai header Access-Control-Allow-Origin, header Access-Control-Allow-Origin tidak dikembalikan.

Tentukan Access-Control-Allow-Origin:http://example.com,https://aliyundoc.com di konsol ApsaraVideo VOD.

Jika nilai header Origin dalam permintaan pengguna adalah http://example.com, CDN POP mengembalikan Access-Control-Allow-Origin:http://example.com.
Jika nilai header Origin dalam permintaan pengguna adalah http://aliyundoc.com, CDN POP tidak mengembalikan Access-Control-Allow-Origin karena permintaan menggunakan HTTP tetapi CDN POP hanya merespons permintaan HTTPS dalam kasus ini.
Jika nilai header Origin dalam permintaan pengguna adalah https://aliyundoc.com, CDN POP mengembalikan Access-Control-Allow-Origin:https://aliyundoc.com.
Jika nilai header Origin dalam permintaan pengguna adalah http://aliyun.com, CDN POP tidak mengembalikan Access-Control-Allow-Origin karena nama domain tidak cocok.

Contoh 2

Jika Anda menetapkan header Access-Control-Allow-Origin ke nama domain wildcard, CDN POP memeriksa apakah nilai header Origin dalam permintaan pengguna cocok dengan nama domain wildcard.

Tentukan Access-Control-Allow-Origin:http://*.aliyundoc.com di konsol ApsaraVideo VOD.

Jika nilai header Origin dalam permintaan pengguna adalah http://demo.aliyundoc.com, CDN POP mengembalikan Access-Control-Allow-Origin:http://demo.aliyundoc.com.
Jika nilai header Origin dalam permintaan pengguna adalah http://demo.example.com, CDN POP tidak mengembalikan Access-Control-Allow-Origin karena nama domain tidak cocok.
Jika nilai header Origin dalam permintaan pengguna adalah https://demo.aliyundoc.com, CDN POP tidak mengembalikan Access-Control-Allow-Origin karena permintaan menggunakan HTTPS tetapi CDN POP hanya merespons permintaan HTTP dalam kasus ini.