Cara mengonfigurasi CORS menggunakan header respons HTTP di Alibaba Cloud CDN dan catatan penggunaan - CDN

Setelah menambahkan situs web Anda ke Alibaba Cloud CDN untuk pengiriman konten, Anda dapat mengonfigurasi header respons HTTP kustom untuk mengaktifkan akses lintas asal.

Apa itu CORS?

Berbagi Sumber Daya Lintas Domain (CORS) adalah solusi lintas asal standar 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 Domain (CORS).

Manfaat

Untuk alasan keamanan, browser menggunakan kebijakan asal yang sama. Hal 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 di 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 lainnya: 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 tanda bintang (*), 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 lainnya: 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.

Catatan Penggunaan

Jika server asal adalah bucket Object Storage Service (OSS) dan CORS dikonfigurasi di kedua konsol OSS dan CDN, pengaturan CORS di konsol CDN digunakan. Untuk informasi lebih lanjut tentang pengaturan CORS di konsol OSS, lihat CORS.
Jika server asal adalah server lokal atau instance Elastic Compute Service (ECS), kami sarankan Anda memisahkan konten dinamis dari konten statis. Dengan cara ini, pengiriman konten statis dipercepat oleh CDN. Pengaturan CORS di konsol CDN hanya berlaku untuk sumber daya statis.

Aktifkan CORS

Masuk ke Alibaba Cloud CDN.
Di panel navigasi kiri, klik Domain Names.
Di halaman Domain Names, temukan nama domain yang ingin Anda kelola dan klik Manage di kolom Actions.
Di pohon navigasi kiri nama domain, klik Cache.
Klik tab Modify Outgoing Request Header.
Klik Customize untuk mengonfigurasi header respons HTTP.

Konfigurasikan parameter untuk menentukan asal yang diizinkan untuk permintaan lintas asal, lalu klik OK.

Penyesuaian

Tabel berikut menjelaskan parameter.

Parameter	Deskripsi	Contoh
Operation	Anda harus mengatur parameter ini ke Add untuk menggunakan fitur CORS.	Add
Response Header	Anda harus mengatur parameter ini ke `Access-Control-Allow-Origin` untuk menggunakan fitur CORS.	Access-Control-Allow-Origin
Header Value	CORS dinonaktifkan: Anda hanya dapat mengonfigurasi wildcard atau asal tunggal yang ditentukan. Wildcard (``): Wildcard dikonfigurasi, menunjukkan bahwa sumber daya dapat diakses dari semua asal. Asal tunggal yang ditentukan: Asal tunggal (nama domain) ditentukan, menunjukkan bahwa sumber daya hanya dapat diakses dari asal yang ditentukan. CORS diaktifkan: Anda dapat mengonfigurasi wildcard, asal tunggal yang ditentukan, beberapa asal yang ditentukan, dan nama domain wildcard.* Wildcard (``): Wildcard dikonfigurasi, menunjukkan bahwa sumber daya dapat diakses dari semua asal. Asal tunggal yang ditentukan: Asal tunggal (nama domain) ditentukan, menunjukkan bahwa sumber daya hanya dapat diakses dari asal yang ditentukan. Beberapa asal yang ditentukan:* Beberapa asal (nama domain) ditentukan dan dipisahkan dengan koma (`,`), menunjukkan bahwa sumber daya dapat diakses dari asal dalam rentang yang ditentukan. Nama domain wildcard: Nama domain wildcard dikonfigurasi, menunjukkan bahwa sumber daya dapat diakses dari semua asal yang cocok dengan nama domain wildcard yang ditentukan.	`` `http://www.aliyun.com` `https://aliyun.com,http://www.aliyun.com` `http://.aliyun.com`
Allow Duplicates	Ya: Duplikat header diizinkan. Header yang dikembalikan dari server asal dan header yang ditambahkan ke respons dikembalikan ke klien. Tidak: Duplikat header tidak diizinkan. Header yang dikembalikan dari server asal ditimpa oleh header yang ditambahkan ke respons. Penting Pengaturan Allow Duplicates dan CORS saling eksklusif. Jika Anda mengatur Allow Duplicates ke Yes, pengaturan CORS menjadi tidak valid.	No
CORS	Anda hanya dapat mengonfigurasi parameter CORS jika Anda mengatur Operation ke Add dan Response Header ke `Access-Control-Allow-Origin`. Nilai valid dari CORS: Disable dan Enable. Nilai default: Disable. Disable: CDN POP tidak memeriksa header `Origin` dalam permintaan pengguna. Dalam kasus ini, POP mengembalikan nilai yang dikonfigurasi dari `Access-Control-Allow-Origin`. Enable: CDN POP memeriksa header `Origin` dalam permintaan pengguna dan menentukan nilai untuk header `Access-Control-Allow-Origin` berdasarkan aturan berikut: Pencocokan pola wildcard: Jika Anda mengatur header `Access-Control-Allow-Origin` ke tanda bintang (), `Access-Control-Allow-Origin:` dikembalikan, terlepas dari apakah permintaan pengguna berisi header `Origin` atau nilai yang ditentukan untuk header `Origin`. Pencocokan tepat: Anda dapat menentukan satu atau lebih nilai untuk header `Access-Control-Allow-Origin`. Pisahkan beberapa nilai dengan koma (`,`): Jika nilai header `Origin` dalam permintaan pengguna cocok dengan nilai header `Access-Control-Allow-Origin`, nilai yang cocok dari header `Access-Control-Allow-Origin` dikembalikan. Jika nilai header `Origin` dalam permintaan pengguna tidak cocok dengan nilai header `Access-Control-Allow-Origin` , header `Access-Control-Allow-Origin` tidak dikembalikan. Pencocokan nama domain wildcard: Jika Anda mengatur header `Access-Control-Allow-Origin` ke nama domain wildcard, nilai header `Origin` dicocokkan dengan nama domain wildcard. Jika Anda mengatur parameter CORS ke Enable dan nilai yang ingin Anda tentukan untuk parameter Header Value berisi tanda hubung (`-`), Anda perlu menghindari tanda hubung (`-`) menjadi `%-`. Contoh: Nilai header respons asli: `http://doc.aliyun-example.com`. Nilai header respons yang dihindari: `http://doc.aliyun%-example.com`.	Enable

Konfigurasikan parameter untuk menentukan asal yang diizinkan untuk permintaan lintas asal, lalu klik OK.

Metode Permintaan

Tabel berikut menjelaskan parameter.

Parameter	Deskripsi	Contoh
Operation	Anda harus mengatur parameter ini ke Add.	Add
Response Header	Anda harus mengatur parameter ini ke `Access-Control-Allow-Methods`.	Access-Control-Allow-Methods
Header Value	Nilai valid: `GET`, `POST`, dan `PUT`. Jika Anda menambahkan `GET`, `POST`, dan `PUT` pada saat yang sama, pisahkan dengan koma (`,`).	`GET`
Allow Duplicates	Ya: Duplikat header diizinkan. Header yang dikembalikan dari server asal dan header yang ditambahkan ke respons dikembalikan ke klien. Tidak: Duplikat header tidak diizinkan. Header yang dikembalikan dari server asal ditimpa oleh header yang ditambahkan ke respons.	No

Contoh

Contoh 1

Anggaplah Anda mengatur header Access-Control-Allow-Origin ke satu atau lebih nilai yang dipisahkan dengan koma (,):

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

Di konsol CDN, header respons diatur ke Access-Control-Allow-Origin:http://example.com,https://aliyundoc.com.

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 mengatur parameter Access-Control-Allow-Origin ke nama domain wildcard, CDN POP memeriksa apakah nilai header Origin dalam permintaan pengguna cocok dengan nama domain wildcard.

Di konsol CDN, header respons diatur ke Access-Control-Allow-Origin:http://*.aliyundoc.com.

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.

FAQ

Mengapa masalah CORS dilaporkan dan header respons Access-Control-Allow-Origin tidak dikembalikan meskipun saya telah mengonfigurasi header respons?