Menetapkan CORS (Cross-Origin Resource Sharing) untuk Laman Web dalam ServBay

Dalam pembangunan web moden, aplikasi frontend (selalunya dijalankan di satu domain) kerap perlu mengakses API backend atau servis lain (yang mungkin menggunakan domain atau port berbeza). Polisi same-origin pada pelayar secara lalai akan menyekat permintaan lintas domain seperti ini atas sebab keselamatan. Cross-Origin Resource Sharing (CORS) ialah mekanisme standard yang membenarkan pelayan menyatakan sumber mana yang boleh mengakses sumbernya, supaya komunikasi silang domain dapat dilaksanakan dengan selamat.

Artikel ini akan membimbing anda cara untuk mengkonfigurasi dan mendayakan CORS dengan mudah melalui antaramuka pengguna ServBay bagi laman web anda dalam persekitaran pembangunan web tempatan.

Apakah CORS?

Cross-Origin Resource Sharing (CORS) ialah mekanisme berdasarkan header HTTP yang membolehkan pelayan memberitahu pelayar domain, protokol, atau port mana (selain sumbernya sendiri) yang dibenarkan untuk memuatkan sumber daripadanya. Apabila satu laman web cuba untuk mendapatkan sumber dari domain berbeza, pelayar akan melaksanakan "permintaan HTTP lintas domain". Berdasarkan polisi same-origin, permintaan sebegini akan disekat secara lalai. CORS membekalkan cara untuk pelayan dan pelayar berkomunikasi bagi memastikan permintaan lintas domain selamat dan dibenarkan.

Mengapa pembangun perlu mengkonfigurasi CORS?

Apabila anda membina aplikasi dengan pemisahan frontend-backend (contoh, frontend di app.servbay.demo, backend API di api.servbay.demo), atau apabila frontend anda perlu memanggil API pihak ketiga, pelayar akan menyekat permintaan tersebut kerana polisi same-origin. Pengkonfigurasian CORS ialah untuk memberitahu pelayar bahawa pelayan membenarkan permintaan dari sumber frontend anda untuk mengakses sumbernya, sekali gus menyelesaikan kegagalan permintaan akibat polisi same-origin.

Memahami Header HTTP Penting untuk CORS

Apabila pelayan memberi respons kepada permintaan lintas domain, beberapa header HTTP jenis Access-Control-* yang penting akan disertakan. Pelayar akan menentukan sama ada permintaan lintas domain ini dibenarkan berdasarkan nilai-nilai header ini. Berikut adalah parameter utama CORS yang boleh dikonfigurasi (berkaitan dengan header HTTP) dalam ServBay:

1. Access-Control-Allow-Origin

   • Fungsi: Header CORS yang paling penting, digunakan untuk menentukan domain tertentu mana yang dibenarkan untuk mengakses sumber.
   • Nilai:
     • *: Bermaksud semua domain dibenarkan untuk mengakses. Peringatan Penting: Walaupun mudah, penggunaan * TIDAK digalakkan dalam produksi kerana ia membenarkan mana-mana laman web mengakses sumber anda, membawa risiko keselamatan.
     • https://servbay.demo: Hanya benarkan permintaan dari sumber tertentu ini.
     • https://servbay.demo https://api.servbay.demo: Benarkan dari beberapa sumber, dipisahkan dengan ruang kosong.
   • Nota: Jika permintaan CORS perlu membawa Cookie atau maklumat pengesahan HTTP (apabila Access-Control-Allow-Credentials: true), maka Access-Control-Allow-Origin tidak boleh ditetapkan kepada *. Anda mesti menyatakan sumber tertentu.

2. Access-Control-Allow-Methods

   • Fungsi: Menyatakan kaedah HTTP mana yang dibenarkan untuk permintaan lintas domain (seperti GET, POST, PUT, DELETE, OPTIONS dan lain-lain).
   • Nilai: Contohnya: GET, POST, PUT, DELETE, OPTIONS. Dipisahkan dengan koma.
   • Nota: Untuk permintaan "bukan mudah" (seperti menggunakan PUT atau DELETE atau mempunyai header khas), pelayar akan terlebih dahulu menghantar permintaan preflight OPTIONS. Pelayan MESTI menjawab permintaan preflight dan menyatakan kaedah mana yang dibenarkan menerusi header ini. Biasanya kaedah OPTIONS harus ada dalam senarai anda.

3. Access-Control-Allow-Headers

   • Fungsi: Menyatakan header HTTP khas mana yang boleh dibawa bersama permintaan lintas domain.
   • Nilai: Contoh: Content-Type, Authorization, X-Requested-With. Dipisahkan dengan koma.
   • Nota: Jika permintaan frontend anda menggunakan header selain header "mudah" (cth. Accept, Accept-Language, Content-Language, Content-Type dengan nilai application/x-www-form-urlencoded, multipart/form-data, atau text/plain), pelayar akan menghantar permintaan preflight dan anda perlu secara jelas menyatakan header khusus mana yang dibenarkan.

4. Access-Control-Allow-Credentials

   • Fungsi: Menyatakan sama ada informasi kepercayaan pengguna seperti Cookie, sijil SSL klien, atau autentikasi HTTP boleh dibawa dalam permintaan lintas domain.
   • Nilai: true atau false.
   • Nota: Jika ditetapkan kepada true, seperti diterangkan di atas, nilai untuk Access-Control-Allow-Origin tidak boleh bersifat wildcard *. Juga, pihak klien (JavaScript pada pelayar) perlu menetapkan flag khusus, cth. xhr.withCredentials = true atau fetch(url, { credentials: 'include' }).

Mengkonfigurasi dan Mengaktifkan CORS dalam ServBay

ServBay menawarkan antaramuka visual yang intuitif, membolehkan anda mengkonfigurasi tetapan CORS secara berasingan untuk setiap laman. Berikut ialah langkah terperinci:

1. Buka ServBay dan pergi ke senarai laman web: Lancarkan aplikasi ServBay. Pada bar navigasi kiri, klik pilihan "Laman Web". Anda akan dapat melihat senarai semua laman tempatan yang telah dikonfigurasi dalam ServBay.

2. Pilih laman yang ingin dikonfigurasi CORS: Dalam senarai laman, cari laman tertentu yang anda mahu dayakan dan konfigurasikan CORS. Klik pada nama laman untuk masuk ke halaman konfigurasi laman tersebut.

3. Cari dan aktifkan tetapan CORS: Di bahagian tengah halaman konfigurasi laman, skrol ke bawah sehingga bahagian "CORS". Secara lalai, CORS dimatikan dalam ServBay. Klik suis di sebelah bahagian ini untuk tukar dari “Dimatikan” ke “Dihidupkan”. Setelah didayakan, pilihan konfigurasi di bawahnya menjadi boleh disunting.

4. Konfigurasi Access-Control-Allow-Origin: Dalam ruang input "Access-Control-Allow-Origin", masukkan satu atau lebih sumber (origin) yang ingin diberi kebenaran untuk mengakses sumber di laman ini. Untuk lebih daripada satu origin, pisahkan dengan ruang kosong. Contoh: https://frontend.servbay.demo https://anotherapp.servbay.demo. Elakkan guna * untuk produksi.

5. Konfigurasi Access-Control-Allow-Methods: Dalam input "Access-Control-Allow-Methods", masukkan senarai kaedah HTTP yang dibenarkan, dipisahkan dengan koma. Contoh: GET, POST, PUT, DELETE, OPTIONS. Pastikan semua kaedah yang aplikasi anda gunakan dimasukkan, dan biasanya masukkan OPTIONS untuk menyokong permintaan preflight.

6. Konfigurasi Access-Control-Allow-Headers: Dalam ruang input "Access-Control-Allow-Headers", senaraikan header HTTP khusus yang anda mahu benarkan bersama permintaan CORS, dipisahkan dengan koma. Contoh: Content-Type, Authorization, X-Custom-Header. Hanya masukkan header yang benar-benar diperlukan oleh aplikasi anda.

7. Konfigurasi Access-Control-Allow-Credentials (Pilihan): Jika anda perlu membenarkan permintaan lintas domain membawa Cookie atau maklumat pengesahan HTTP, aktifkan suis di sebelah "Allow-Credentials" kepada status ON. Perhatian: Jika anda mengaktifkan, nilai Access-Control-Allow-Origin pada langkah 4 tidak boleh diisi dengan *.

8. Simpan konfigurasi anda: Setelah semua tetapan dilakukan, jangan lupa klik butang "Simpan" di kanan bawah halaman untuk menerapkan perubahan. ServBay akan mengemaskini konfigurasi pelayan web (contohnya Caddy atau Nginx) secara automatik tanpa perlu muat semula secara manual.

Contoh Konfigurasi

Imej berikut menunjukkan contoh konfigurasi CORS untuk laman web bernama "ServBay Demo Website" dalam ServBay:

Berdasarkan konfigurasi di atas:

• Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: Telah didayakan (true)

Ini bermaksud hanya permintaan dari https://frontend.servbay.demo dan https://api.servbay.demo dibenarkan untuk mengakses sumber di "ServBay Demo Website". Permintaan ini boleh menggunakan kaedah GET, POST, PUT, DELETE, OPTIONS, membawa header Content-Type dan Authorization, serta dibenarkan untuk membawa Cookie dan maklumat kepercayaan pengguna.

Perhatian & Amalan Terbaik

• Utamakan keselamatan: Gunakan Access-Control-Allow-Origin: * hanya untuk pembangunan/ujian. Untuk produksi, sentiasa hadkan kepada sumber sebenar aplikasi demi mengelakkan risiko keselamatan.
• Permintaan preflight: Fahami operasi permintaan preflight (kaedah OPTIONS) sangat penting untuk nyahpepijat masalah CORS. Pastikan pelayan anda (dikawal melalui konfigurasi ServBay) menjawab header yang betul untuk permintaan preflight.
• Caching pelayar: Pelayar mungkin menyimpan cache polisi CORS. Jika anda masih mengalami masalah selepas menukar konfigurasi dalam ServBay, cuba kosongkan cache pelayar atau gunakan mod incognito untuk ujian.
• CORS pada aplikasi: Sesetengah framework web (seperti Laravel, Express.js, Spring Boot dsb) turut menawarkan konfigurasi CORS pada lapisan kod aplikasi. CORS pada ServBay berkuat kuasa di lapisan pelayan web (Caddy/Nginx), dan biasanya mengatasi konfigurasi aplikasi. Pada situasi tertentu, anda perlu menyegerakkan konfigurasi antara pelayan web dan aplikasi.
• Alat debug: Gunakan alat pembangun pelayar (tekan F12) dan tab rangkaian (Network) untuk memeriksa header HTTP permintaan dan respons untuk CORS. Ini membantu anda kenal pasti sama ada konfigurasi CORS telah berfungsi dan apa punca kegagalan permintaan.

Soalan Lazim (FAQ)

S: Saya sudah konfigurasi CORS seperti panduan, tetapi permintaan lintas domain masih gagal?

J: Sila semak langkah-langkah berikut:

1. Periksa konsol pelayar & tab rangkaian: Pelayar akan memaparkan ralat berkaitan CORS di konsol dan anda boleh melihat butiran permintaan/response di tab rangkaian. Periksa sama ada respons mengandungi header Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers dan nilainya padan dengan permintaan anda.
2. Sahkan alamat sumber: Pastikan alamat penuh (protokol, domain, port) dalam Access-Control-Allow-Origin sama sepenuhnya dengan alamat permintaan dari frontend anda.
3. Periksa kaedah dan header: Pastikan Access-Control-Allow-Methods sudah senaraikan semua kaedah HTTP digunakan, dan semua header khusus sudah ada dalam Access-Control-Allow-Headers.
4. Isu kepercayaan: Jika perlu bawa Cookie atau kepercayaan lain, pastikan Allow-Credentials sudah diaktifkan dalam ServBay, dan Access-Control-Allow-Origin bukan *. Juga, pastikan kod klien juga menetapkan flag untuk bawa kepercayaan (misal, withCredentials = true).
5. Permintaan preflight: Untuk permintaan bukan mudah, periksa jika pelayar menghantar permintaan preflight OPTIONS dan pelayan memberi respons dengan header CORS yang betul.
6. Simpan dalam ServBay: Sahkan anda sudah klik “Simpan” selepas buat perubahan konfigurasi dalam ServBay.

S: Bolehkah saya tetapkan polisi CORS global untuk semua laman?

J: Konfigurasi CORS dalam ServBay adalah secara individu untuk setiap laman bagi memastikan fleksibiliti dan keselamatan. Buat masa ini, UI ServBay tidak menyediakan tetapan global CORS. Jika anda mahu polisi serupa untuk banyak laman, anda perlu konfigurasi setiap laman secara berasingan.

S: Bagaimana ServBay melaksanakan konfigurasi CORS?

J: ServBay menggunakan Caddy atau Nginx sebagai pelayan web di belakang tabir. Konfigurasi CORS yang anda lakukan di UI ServBay akan diterjemahkan kepada fail konfigurasi Caddyfile atau direktif Nginx yang setara. ServBay mengurus fail-fail ini dan memastikan pelayan web dimuat semula tanpa anda perlu melakukannya secara manual.

Kesimpulan

Dengan antaramuka visual ServBay yang mudah digunakan, anda boleh mendayakan dan mengkonfigurasi CORS untuk laman web dalam persekitaran pembangunan tempatan dengan berkesan, sekali gus menyelesaikan isu akses lintas domain dengan mudah. Memahami dan mengkonfigurasi header utama seperti Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers dan Access-Control-Allow-Credentials adalah kunci untuk memastikan permintaan lintas domain anda berjalan dengan lancar dan selamat. Ikuti panduan dan tip terbaik dalam artikel ini untuk meningkatkan kecekapan pembangunan web tempatan anda.