Rumah > hujung hadapan web > tutorial js > Pengenalan kepada CORS (Cross-Origin Resource Sharing) Apakah itu CORS?

Pengenalan kepada CORS (Cross-Origin Resource Sharing) Apakah itu CORS?

DDD
Lepaskan: 2024-11-16 02:10:03
asal
531 orang telah melayarinya

Introduction to CORS (Cross-Origin Resource Sharing) What is CORS?

CORS, atau Perkongsian Sumber Silang Asal, ialah ciri keselamatan yang dilaksanakan oleh penyemak imbas web yang membenarkan atau menyekat aplikasi web daripada membuat permintaan kepada domain yang berbeza daripada yang menyediakan halaman web . Secara ringkasnya, CORS menentukan sama ada sumber pada satu domain boleh diakses oleh halaman web daripada domain lain.

Secara lalai, pelayar web menguatkuasakan dasar asal yang sama, yang menyekat halaman web daripada membuat permintaan ke domain yang berbeza daripada yang menyediakan halaman tersebut. Ini dilakukan untuk menghalang tapak web berniat jahat daripada mengakses data sensitif di tapak web lain. Walau bagaimanapun, kadangkala aplikasi web perlu meminta sumber daripada asal yang berbeza (domain, protokol atau port), di mana CORS memainkan peranan.

CORS dalam Tindakan

Apabila aplikasi web pada satu domain perlu meminta data daripada domain lain, ia menghantar permintaan HTTP dengan pengepala khusus yang menunjukkan asal permintaan. Pelayan yang mengehoskan sumber yang diminta kemudiannya mesti memutuskan sama ada untuk membenarkan permintaan dengan menghantar pengepala CORS yang sesuai dalam respons.

Sebagai contoh, jika anda sedang membina aplikasi bahagian hadapan yang dihoskan pada http://example.com, dan ia perlu mengambil data daripada http://api.example2.com, pengepala CORS membenarkan pelayan di api.example2. com untuk menentukan sama ada ia akan membenarkan permintaan daripada example.com.

Kes Penggunaan Biasa

CORS biasanya diperlukan dalam senario berikut:

Akses API pihak ketiga: Banyak aplikasi web moden bergantung pada API luaran untuk perkhidmatan seperti pengesahan, pemprosesan pembayaran atau penyepaduan media sosial. CORS diperlukan apabila API ini dihoskan pada domain yang berbeza.

Komunikasi Frontend-Backend: Dalam kes di mana bahagian depan dan belakang aplikasi web dihoskan pada domain atau subdomain yang berbeza, CORS digunakan untuk membenarkan komunikasi antara mereka.

CDN (Rangkaian Penghantaran Kandungan): Tapak web sering menggunakan CDN untuk menyediakan aset statik seperti imej, helaian gaya atau fail JavaScript. CORS membenarkan tapak utama meminta sumber ini daripada CDN yang dihoskan pada asal yang berbeza.

Parameter dan Penunjuk Utama dalam CORS

Access-Control-Allow-Origin: Pengepala ini adalah yang paling penting dalam CORS dan menunjukkan asal-usul yang dibenarkan untuk mengakses sumber tersebut. Ia boleh ditetapkan kepada:

Asalan tertentu (Access-Control-Allow-Origin: https://example.com)
Kad bebas (Access-Control-Allow-Origin: *), yang membenarkan mana-mana asal mengakses sumber. Walau bagaimanapun, ini tidak dibenarkan untuk permintaan yang termasuk bukti kelayakan.
Access-Control-Allow-Methods: Menentukan kaedah HTTP yang mana (seperti GET, POST, PUT, DELETE) dibenarkan semasa mengakses sumber. Contohnya:
Access-Control-Allow-Methods: GET, POST, PUT

Access-Control-Allow-Headers: Menyenaraikan pengepala HTTP yang boleh digunakan semasa membuat permintaan sebenar. Sebagai contoh, jika permintaan itu termasuk pengepala tersuai seperti X-Custom-Header, ia harus dinyatakan di sini:
Access-Control-Allow-Header: X-Custom-Header, Content-Type

Access-Control-Allow-Credentials: Menunjukkan sama ada permintaan boleh menyertakan bukti kelayakan seperti kuki, pengesahan HTTP atau sijil pihak pelanggan. Ini penting untuk API yang memerlukan pengesahan. Contohnya: Access-Control-Allow-Credentials: true

Access-Control-Expose-Headers: Menentukan tajuk mana yang harus didedahkan oleh penyemak imbas kepada klien yang meminta. Secara lalai, penyemak imbas hanya mendedahkan set pengepala terhad seperti Cache-Control dan Content-Type, tetapi Access-Control-Expose-Headers boleh menyediakan pengepala tambahan.

Access-Control-Max-Age: Mentakrifkan berapa lama hasil permintaan prapenerbangan (lihat di bawah) boleh dicache oleh penyemak imbas. Ia membantu meningkatkan prestasi dengan mengurangkan bilangan permintaan prapenerbangan. Contohnya:
Access-Control-Max-Age: 86400 (24 jam)

Permintaan Prapenerbangan: Untuk jenis permintaan tertentu, terutamanya yang mengubah suai data pelayan (seperti PUT atau DELETE), penyemak imbas menghantar permintaan prapenerbangan menggunakan kaedah HTTP OPTIONS. Ini menyemak dengan pelayan sama ada permintaan sebenar selamat untuk dihantar. Respons pelayan terhadap permintaan prapenerbangan menentukan sama ada penyemak imbas akan meneruskan permintaan sebenar.

Bilakah Anda Memerlukan CORS?

CORS diperlukan apabila:

Permintaan silang asal dibuat: Jika bahagian hadapan dan bahagian belakang anda disampaikan daripada domain atau port yang berbeza, atau jika anda mengakses API luaran daripada aplikasi anda.

Mengakses sumber yang dihoskan pada CDN atau perkhidmatan pihak ketiga: Contohnya, jika anda memuatkan fon, imej atau aset lain daripada CDN, pelayan mesti menyertakan pengepala CORS untuk membolehkan tapak anda mengaksesnya.

Kebimbangan keselamatan: Walaupun mendayakan CORS membenarkan permintaan silang asal, ia harus dikonfigurasikan dengan teliti untuk mengelak daripada membuka aplikasi anda kepada serangan berniat jahat. Hanya asal yang dipercayai harus dibenarkan dan operasi sensitif harus dilindungi dengan langkah keselamatan tambahan seperti token pengesahan.

Kesimpulan

CORS ialah mekanisme penting untuk memastikan perkongsian sumber yang selamat dan terkawal merentas asal yang berbeza. Dikonfigurasikan dengan betul, ia membantu membolehkan aplikasi web moden berinteraksi dengan perkhidmatan dan API pihak ketiga sambil melindungi pengguna daripada risiko keselamatan. Memahami cara mengkonfigurasi pengepala CORS dan mengetahui bila dan mengapa ia diperlukan adalah penting untuk mana-mana pembangun web yang bekerja dengan API, CDN atau aplikasi berbilang domain.

Atas ialah kandungan terperinci Pengenalan kepada CORS (Cross-Origin Resource Sharing) Apakah itu CORS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan