Laravel CORS #3: Implementasi CORS antara Laravel dan React - Perwira Learning Center

1. Latar Belakang

        Pernah bingung mengapa API yang berjalan normal di Postman tiba-tiba muncul error di browser ketika dipanggil dari React? Itulah peran dari CORS. Pada artikel ini, kita akan langsung praktik menyiapkan Laravel sebagai backend dan React sebagai frontend, lalu mengonfigurasi CORS agar keduanya bisa saling berkomunikasi tanpa diblokir oleh browser.

2. Alat dan Bahan

A. Perangkat Lunak

- Sistem Operasi Linux (atau yang lain)

- Composer

- Laravel 12.0

- React

- Visual Studio Code

- Postman

B. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Arsitektur Aplikasi Laravel dan React

    Dalam pengembangan aplikasi modern, frontend dan backend sering dipisahkan menjadi dua aplikasi yang berjalan sendiri-sendiri. Pada artikel ini, laravel akan berperan sebagai backend dan react sebagai frontend yang mengirim request data / sumber daya ke backend.

    Sebelum memulai menkonfigurasi CORS, kita perlu menyiapkan 2 origin yang berbeda untuk 2 aplikasi pengembangan, misalnya:

- Laravel sebagai Backend : http://localhost:8000 -> "laravel new backend"

- React sebagai Frontend : http://localhost:5173 -> "npm create vite@latest frontend"

- Hasilnya:

3.2 Proses Request dari React ke API Laravel

1. Install api dan cantumkan HasApiTokens di model

- Ketik php artisan install:api di terminal

- Buka app/Models/User.php dan tambahkan HasApiTokens

2. Buat endpoint sederhana di routes/api.php

    Endpoint berikut dapat di akses lewat http://localhost:8000/api/users atau lewat postman

3. Buat konfigurasi axios pada React

    Axios adalah library JavaScript yang dipakai untuk mengirim HTTP request dari frontend ke backend sebagai alat untuk kirim request GET, POST, PUT, DELETE, dll.

- Install axios terlebih dahulu di dalam folder frontend

- Buat folder baru di dalam folder frontend

- Buat file axiosConfig.js 

4. Mengambil data di React

    Pada file App.jsx, kita buat file tersebut mengambil data users yang sudah dibuat pada endpoint /users tadi.

5. Jika tidak diizinkan, error CORS akan muncul

6. Konfigurasi Cors

- Publish cors di terminal Visual Studio Code

php artisan config:publish cors

- Tambahkan HandleCors pada bootstrap/app.php dibagian withMiddleware

$middleware->append(HandleCors::class);

- Ubah cors.php untuk mengizinkan frontend

'allowed_origins' => ['http://localhost:5173'],

- Alurnya adalah:

• React memanggil /users
• Request dikirim ke Laravel
• Laravel mengembalikan JSON
• Browser mengecek kebijakan CORS
• Jika diizinkan, data ditampilkan

3.3 Hasil

    Data user berhasil di ambil dan ditampilkan oleh react.

4. Daftar Pustaka

DEV. (2024, 15 Oktober). Cara Penggunaan Axios di ReactJS - GET dan POST Request. https://dev.to/ramadhan002/cara-penggunaan-axios-di-reactjs-get-dan-post-request-53e5