Laravel CORS #4: Error CORS dan Cara Mengatasinya - Perwira Learning Center

1. Latar Belakang

    Dalam pengembangan aplikasi web modern, sering kali frontend dan backend dijalankan pada domain atau port yang berbeda, seperti penggunaan React sebagai frontend dan Laravel sebagai backend. Perbedaan origin ini dapat menimbulkan error CORS (Cross-Origin Resource Sharing), yaitu mekanisme keamanan dari browser yang membatasi permintaan data lintas domain. Namun kira kira, error apa saja yang umum terjadi dan bagaimana cara mengatasinya? Pada artikel kali ini, kita akan melakukan troubleshooting error CORS langkah demi langkah.

2. Alat dan Bahan

A. Perangkat Lunak

- Sistem Operasi Linux (atau yang lain)

- Composer

- Laravel 12.0

- React

- Visual Studio Code

B. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Jenis-jenis Error CORS yang Umum

1. Blocked by CORS Policy (Origin Tidak Diizinkan)

    Error berikut ini artinya server tidak mengirim header Access-Control-Allow-Origin atau origin frontend tidak termasuk dalam daftar yang diizinkan.

Contoh error:

Access to XMLHttpRequest at 'http://localhost:8000/api/users'
from origin 'http://localhost:5173'
has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

    Terjadi karena frontend dan backend berada di domain yang berbeda, atau CORS pada server tidak ditulis dengan benar, atau mungkin requestnya menggunakan method atau header yang khusus sehingga menambah keketatan browser.

2. Method Not Allowed by CORS

Contoh error:

Method PUT is not allowed by Access-Control-Allow-Methods

    Error diatas berarti server tidak mengizinkan method tersebut dalam konfigurasi CORS, kemungkinan besar karena pada bagian allowed_methods di config/cors.php hanya mengizinkan method selain PUT (misalnya hanya GET dan POST).

3. Request Header Not Allowed

Contoh error:

Request header field Authorization is not allowed by Access-Control-Allow-Headers

    Biasanya dikarenakan Frontend mengirim header Authorization, tetapi backend tidak mengizinkan header tersebut. Solusinya, pastikan di config/cors.php bagian allowed_headers harus mengizinkan semua dengan menggunakan simbol *.

3.2 Cara Mengatasi Error CORS Melalui Konfigurasi

1. Buat backend dengan Laravel

laravel new backend
cd backend
php artisan serve

Maka backend akan berjalan di port:

http://localhost:8000

2. Tambahkan endpoint API

Install api dan tambahkan contoh endpoint di dalam api.php:

use Illuminate\Support\Facades\Route;

Route::get('/users', function () {
    return response()->json([
        ['id' => 1, 'name' => 'Nadya'],
        ['id' => 2, 'name' => 'Kameela']
    ]);
});

Tes endpoint di browser atau postman:

http://localhost:8000/api/users

3. Buat frontend dengan React

npm create vite@latest frontend
cd frontend

Maka nanti frontend akan berjalan di:

http://localhost:5173

4. Hubungkan frontend dengan backend

Install axios di terminal sebagai penghubung:

npm install axios

Isi konfigurasi axios pada frontend:

import axios from 'axios';

const api = axios.create({
    baseURL: 'http://localhost:8000/api',
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
    }
});

export default api;

5. Sekarang kalau CORS belum diizinkan untuk origin frontend, maka akan muncul error

6. Untuk mengatasinya, publish file cors.php dan tambahkan HandleCors

Untuk publish file cors.php:

php artisan config:publish cors

Untuk menambahkan HandleCors, buka bootstrap/app.php:

use Illuminate\Http\Middleware\HandleCors; // Import HandleCors

return Application::configure(basePath: dirname(__DIR__))
    ...
    ->withMiddleware(function (Middleware $middleware): void {
        $middleware->append(HandleCors::class); // Tambahkan ini
    })
    ..

7. Ubah konfigurasi cors.php

Buka config/cors.php dan ubah allowed_origins menjadi port milik frontend:

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

8. Dengan begitu, error Blocked by CORS Policy akan menghilang

    Error yang disebabkan oleh perbedaan origin menghilang dan frontend langsung dapat mengambil data dari backend karena sudah diberikan izin oleh cors.

4. Daftar Pustaka

Code Politan. (2024, 19 September). Solusi Ampuh Atasi Error CORS yang Bikin Pusing Developer!. Diakses dari: https://www.codepolitan.com/blog/solusi-ampuh-atasi-error-cors-yang-bikin-pusing-developer-q3cgrn/