Mengapa Localhost Masih Mencetuskan Ralat CORS
Anda menjalankan frontend pada localhost:3000. Anda menjalankan backend pada localhost:5000. Kedua-dua aplikasi berada di dalam komputer riba anda. Namun, anda tetap melihat ralat CORS.
Ini berlaku disebabkan cara pelayar (browser) mentakrifkan sesuatu asal (origin).
Sesuatu asal terdiri daripada tiga bahagian:
- Protokol
- Domain
- Port
Bandingkan kedua-dua ini:
Mereka berkongsi protokol yang sama. Mereka berkongsi domain yang sama. Mereka menggunakan port yang berbeza.
Pelayar melihat port yang berbeza sebagai asal yang berbeza.
Apabila aplikasi React anda memanggil API anda, pelayar melihatnya sebagai permintaan rentas-asal (cross-origin request). Ia menganggap kedua-duanya sebagai dua entiti yang berbeza.
Mengapa peraturan ini wujud? Keselamatan.
Jika laman web boleh memanggil mana-mana API secara bebas, laman web berniat jahat boleh:
- Membaca data bank anda.
- Mengakses API peribadi.
- Bertindak bagi pihak anda.
Pelayar menggunakan Polisi Asal-Sama (Same-Origin Policy) untuk menghalang perkara ini. Laman Web A tidak boleh mengakses Laman Web B melainkan Laman Web B membenarkannya.
CORS bermaksud Cross-Origin Resource Sharing. Ia adalah cara untuk pelayan anda memberitahu pelayar: "Saya mempercayai permintaan daripada asal yang khusus ini."
Anda boleh membetulkan perkara ini dengan menambah pengepala (header) pada backend anda:
Access-Control-Allow-Origin: http://localhost:3000
Ini memberitahu pelayar bahawa permintaan tersebut adalah selamat.
Satu perkara yang sering mengelirukan: Anda melihat permintaan masuk ke dalam log backend anda, tetapi frontend gagal.
Ini berlaku kerana:
- Frontend menghantar permintaan.
- Backend menerima permintaan dengan berjaya.
- Backend menghantar respons dengan berjaya.
- Pelayar menerima respons dan menyekatnya disebabkan peraturan keselamatan.
Ralat tersebut adalah ciri keselamatan pelayar.
Alatan seperti Postman atau cURL berfungsi kerana ia bukan pelayar. Ia tidak menguatkuasakan polisi keselamatan pelayar.
Pelayar mengabaikan fakta bahawa kedua-dua aplikasi berada di dalam mesin anda. Ia hanya mementingkan asal (origin) tersebut.