How to Fix CORS Errors in Laravel 11/12

Hello, web developers! In this article, we'll see how to configure CORS middleware in Laravel 11/12. In Laravel 11/12, customize CORS middleware. By default, enable CORS middleware with default configuration in Laravel 11/12. Cross-origin resource sharing is a mechanism that allows a web page to access restricted resources from a server on a domain different than the domain that served the web page.

Cross-Origin Resource Sharing (CORS)

CORS (Cross-Origin Resource Sharing) errors are common in web applications that make API requests across different domains. If you're developing a Laravel 11/12 application and encountering CORS issues, this guide will help you resolve them efficiently.

What is CORS?

CORS is a security feature implemented by web browsers to prevent unauthorized cross-origin requests. When a frontend application (e.g., React, Vue, or a different Laravel project) tries to access an API from another domain, the browser checks if the server allows such requests. If not, it blocks them, resulting in a CORS error.

Fixing CORS Errors in Laravel 11/12

Sometimes, you may need to customize the CORS configuration values for your application. You may do so by publishing the cors configuration file using the config:publish Artisan command:

php artisan config:publish cors

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,

];

I added the related Cors Middleware in my app.php

->withMiddleware(function (Middleware $middleware) {
		...
		 $middleware->append(\Illuminate\Http\Middleware\HandleCors::class);
})

This command will place a cors.php configuration file within your application's config directory.

For more information on CORS and CORS headers, please consult the MDN web documentation on CORS.

4. Clear Config Cache

After modifying the configuration, clear the cache to apply changes:

php artisan config:clear
php artisan cache:clear

You can change the settings of allowed methods, origins, headers etc.

Now, your Laravel API should be accessible from any frontend without CORS restrictions! 🚀

I hope it can help you...