How to fix laravel api cors error

[rahman-cmd]

Select Topic Area

Question

Body

<title>Display JSON Data</title>

<script>
    // Fetch JSON data from the API endpoint
    fetch('https://site.co/api/v1/customer/config')
        .then(response => response.json())
        .then(data => {
            // Render the JSON data on the HTML page
            const jsonDataElement = document.getElementById('json-data');
            jsonDataElement.textContent = JSON.stringify(data, null, 2);
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
</script>

Access to fetch at 'https://site.co/api/v1/customer/config' from origin 'null' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[amankr1469]

fetch('https://site.co/api/v1/customer/config', { mode: 'no-cors' })

This disables CORS checks (but the approach is not recommended for most cases due to security concerns). 

[ahmadrauf51]

How to fix this error in our Laravel API:

To begin with, we have to install a package to handle CORS headers. A popular package is fruitcake/laravel-cors. We can install it with Composer.

Then, we have to register the Cors middleware in our app/Http/Kernel.php file.

This is done by adding it to the $middleware array:

protected $middleware = [
// ...
\Fruitcake\Cors\HandleCors::class,
];

Now, it is time to publish the configuration file for the laravel-cors package with the Artisan command:

php artisan vendor:publish –tag=cors

This command will create a config/cors.php configuration file.

Then, open the config/cors.php file and configure it as per our needs. We can mention which origins, methods, headers, and other settings are allowed for our API.

For example:
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,

We can adjust these settings to match our needs.

At this point, we have to test our API requests from different origins to make sure that the CORS policy is correctly configured and that we can make requests without encountering CORS errors.

Finally, we can make changes to our CORS configuration for better performance. After that, we can clear the cache using Artisan:

php artisan config:clear

And then re-cache the configuration:

php artisan config:cache

Furthermore, if our API is meant to be accessible from multiple origins, we can use proper authentication and authorization mechanisms to secure our API endpoints.