Mengapa Localhost Masih Memicu Error CORS
Anda menjalankan frontend di localhost:3000. Anda menjalankan backend di localhost:5000. Kedua aplikasi tersebut berada di laptop Anda. Namun, Anda melihat error CORS.
Hal ini terjadi karena cara browser mendefinisikan origin.
Sebuah origin terdiri dari tiga bagian:
- Protokol
- Domain
- Port
Bandingkan kedua hal ini:
Keduanya menggunakan protokol yang sama. Keduanya menggunakan domain yang sama. Keduanya menggunakan port yang berbeda.
Browser melihat port yang berbeda sebagai origin yang berbeda.
Saat aplikasi React Anda memanggil API Anda, browser melihatnya sebagai permintaan cross-origin. Browser menganggap keduanya sebagai dua entitas yang terpisah.
Mengapa aturan ini ada? Keamanan.
Jika situs web dapat memanggil API apa pun secara bebas, situs berbahaya dapat:
- Membaca data bank Anda.
- Mengakses API pribadi.
- Bertindak atas nama Anda.
Browser menggunakan Same-Origin Policy untuk menghentikan hal ini. Situs Web A tidak dapat mengakses Situs Web B kecuali Situs Web B mengizinkannya.
CORS adalah singkatan dari Cross-Origin Resource Sharing. Ini adalah cara bagi server Anda untuk memberi tahu browser: "Saya mempercayai permintaan dari origin spesifik ini."
Anda memperbaikinya dengan menambahkan header ke backend Anda: Access-Control-Allow-Origin: http://localhost:3000
Ini memberi tahu browser bahwa permintaan tersebut aman.
Hal yang sering membingungkan: Anda melihat permintaan masuk ke log backend Anda, tetapi frontend gagal.
Hal ini terjadi karena:
- Frontend mengirim permintaan.
- Backend menerima permintaan dengan sukses.
- Backend mengirim respons dengan sukses.
- Browser menerima respons dan memblokirnya karena aturan keamanan.
Error tersebut adalah fitur keamanan browser.
Alat seperti Postman atau cURL berfungsi karena mereka bukan browser. Mereka tidak menerapkan kebijakan keamanan browser.
Browser mengabaikan fakta bahwa kedua aplikasi berada di mesin Anda. Browser hanya peduli pada origin.