Cara mengonfigurasi CORS menggunakan header respons HTTP dan catatan penggunaan - Edge Security Acceleration

Setelah menambahkan situs web Anda ke Alibaba Cloud Dynamic Content Delivery Network (DCDN), Anda dapat mengonfigurasi header respons HTTP kustom untuk mengaktifkan akses lintas domain.

Apa itu CORS?

Berbagi sumber daya lintas domain (CORS) adalah solusi lintas domain 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 tujuan keamanan, browser menggunakan kebijakan asal yang sama. Hal ini membatasi halaman web untuk menginisiasi 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 DCDN. Jika permintaan untuk mengakses sumber daya DCDN membawa header yang sesuai dengan aturan yang diizinkan, sumber daya lintas domain 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 domain, seperti Access-Control-Allow-Origin: *.
Klien menerima respons dan browser memeriksa nilai header. Nilai header adalah asterisk (*), yang menunjukkan bahwa permintaan lintas domain dari semua asal diizinkan. Kemudian, browser menampilkan respons.

CORS diaktifkan

Klien mengirim permintaan untuk http://example.com/index.html ke DCDN.
DCDN 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 DCDN. Permintaan tersebut mencakup header Origin:http://example.com.
DCDN menerima permintaan dan kemudian membandingkan nilai header Origin dalam permintaan dengan nilai yang dikonfigurasikan 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.
DCDN mengembalikan header lintas domain, 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 domain dari http://example.com diizinkan. Kemudian, browser menampilkan respons.

Catatan Penggunaan

Jika server asal adalah bucket Object Storage Service (OSS) dan CORS dikonfigurasi baik di OSS maupun di konsol DCDN, pengaturan CORS di konsol DCDN yang digunakan. Untuk informasi lebih lanjut tentang pengaturan CORS di konsol OSS, lihat CORS.
Jika server asal adalah server lokal atau instance ECS, kami sarankan Anda memisahkan konten dinamis dari konten statis. Dengan cara ini, pengiriman konten statis dipercepat oleh DCDN. Pengaturan CORS di DCDN hanya berlaku untuk sumber daya statis. Untuk informasi lebih lanjut, lihat Aturan Percepatan Konten Dinamis dan Statis.

Aktifkan CORS

Masuk ke Konsol DCDN.
Di panel navigasi kiri, klik Domain Names.
Di halaman Domain Names, temukan nama domain yang ingin Anda kelola dan klik Configure.
Di pohon navigasi kiri nama domain, klik Caching.
Klik tab Modify Outgoing Request Header. Lalu klik Add.

Konfigurasikan parameter sesuai dengan tabel berikut dan klik OK.

Parameter	Deskripsi	Contoh
Operation	Anda harus menetapkan parameter ini ke Add untuk menggunakan fitur CORS.	Add
Response Header	Anda harus menetapkan 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: Header duplikat diizinkan. Header yang dikembalikan dari server asal dan header yang ditambahkan ke respons dikembalikan ke klien. Tidak: Header duplikat 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 menetapkan Allow Duplicates ke Yes, pengaturan CORS menjadi tidak valid.	No
CORS	Anda dapat mengonfigurasi parameter CORS hanya jika Anda menetapkan Operation ke Add dan Response Header ke `Access-Control-Allow-Origin`. Nilai valid dari CORS: Disable dan Enable. Nilai default: Disable. Disable: DCDN POP tidak memeriksa header `Origin` dalam permintaan pengguna. Dalam kasus ini, POP mengembalikan nilai yang dikonfigurasi dari `Access-Control-Allow-Origin`. Enable: DCDN POP memeriksa header `Origin` dalam permintaan pengguna dan menentukan nilai untuk header `Access-Control-Allow-Origin` berdasarkan aturan berikut: Pencocokan pola wildcard: Jika Anda menetapkan header `Access-Control-Allow-Origin` ke asterisk (), `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 menetapkan header `Access-Control-Allow-Origin` ke nama domain wildcard, nilai header `Origin` dicocokkan dengan nama domain wildcard. Jika Anda menetapkan parameter CORS ke Enable dan nilai yang ingin Anda tentukan untuk parameter Header Value berisi tanda hubung (`-`), Anda perlu meloloskan tanda hubung (`-`) ke `%-`. Contoh: Nilai header respons asli: `http://doc.aliyun-example.com`. Nilai header respons lolos: `http://doc.aliyun%-example.com`.	Enable

Konfigurasikan parameter sesuai dengan tabel berikut dan klik OK.

Parameter	Deskripsi	Contoh
Operation	Anda harus menetapkan parameter ini ke Add.	Add
Response Header	Anda harus menetapkan 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 mereka dengan koma (`,`).	`GET`
Allow Duplicates	Ya: Header duplikat diizinkan. Header yang dikembalikan dari server asal dan header yang ditambahkan ke respons dikembalikan ke klien. Tidak: Header duplikat tidak diizinkan. Header yang dikembalikan dari server asal ditimpa oleh header yang ditambahkan ke respons.	No

Contoh

Contoh 1

Anggaplah 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 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 DCDN, 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, DCDN POP mengembalikan Access-Control-Allow-Origin:http://example.com.
Jika nilai header Origin dalam permintaan pengguna adalah http://aliyundoc.com, DCDN POP tidak mengembalikan Access-Control-Allow-Origin karena permintaan menggunakan HTTP tetapi DCDN POP hanya merespons permintaan HTTPS dalam kasus ini.
Jika nilai header Origin dalam permintaan pengguna adalah https://aliyundoc.com, DCDN POP mengembalikan Access-Control-Allow-Origin:https://aliyundoc.com.
Jika nilai header Origin dalam permintaan pengguna adalah http://aliyun.com, DCDN POP tidak mengembalikan Access-Control-Allow-Origin karena nama domain tidak cocok.

Contoh 2

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

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

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