Konfigurasi CORS Middleware di Laravel 11: Panduan Lengkap

Memahami CORS

CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan yang memungkinkan browser untuk membuat permintaan HTTP ke server pada domain yang berbeda dari domain halaman saat ini. Ini sangat penting dalam aplikasi modern yang sering melibatkan interaksi antar berbagai domain, seperti ketika membangun aplikasi front-end (misalnya, React, Vue) yang berkomunikasi dengan API backend Laravel.

Mengapa Kita Perlu CORS di Laravel?

• Keamanan: CORS membantu mencegah serangan cross-site scripting (XSS) dengan membatasi sumber daya yang dapat diakses oleh skrip dari domain lain.
• API: Ketika membangun API, CORS memungkinkan aplikasi front-end yang berada di domain berbeda untuk mengakses endpoint API Laravel.
• Single Page Applications (SPAs): SPAs seringkali membuat permintaan ke server backend untuk mengambil data. CORS memastikan bahwa permintaan ini diizinkan.

Laravel 11 dapat secara otomatis merespons permintaan HTTP CORS OPTIONS dengan pengaturan yang Anda pilih. Permintaan OPTIONS ditangani oleh middleware HandleCors, yang sudah termasuk dalam tumpukan middleware global aplikasi Anda.

Terkadang, Anda mungkin perlu mengubah pengaturan CORS untuk aplikasi Anda. Anda dapat melakukan ini dengan menerbitkan file konfigurasi cors menggunakan perintah config:publish artisan:

php artisan config:publish cors

Sekarang, perintah di atas menambahkan file konfigurasi "cors.php" baru, Anda dapat memperbarui opsi sesuai kebutuhan Anda.

config/cors.php

<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

Anda dapat mengubah pengaturan methods, origins, headers, dll.

Saya harap ini dapat membantu Anda...