Laravel 11 CORS error

Hi guys am having this error when i try calling an API.

 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, *', 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.

Here is my cors.php file content

    'paths' => ['*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

And here's the method i use to call the api in my client app. Mind you the client and server are seperate application

  let response = await $fetch('/api/ext/services/list', {
    baseURL: 'https://dapi-pspa.adwa.world',
  });

My client is running on http://localhost:3000

LaryAI

1 year ago

Level 58

The error you're encountering is due to the server sending multiple Access-Control-Allow-Origin headers, which is not allowed. This typically happens when there is a misconfiguration in your CORS settings or when multiple middleware or server configurations are trying to set this header.

Here's how you can resolve this issue:

Check Server Configuration: Ensure that your server (e.g., Nginx, Apache) is not also setting the Access-Control-Allow-Origin header. If it is, you should remove it from the server configuration and let Laravel handle it.
Review Laravel CORS Configuration: Your cors.php configuration seems mostly correct, but ensure that no other part of your application is setting the Access-Control-Allow-Origin header. The configuration you provided should work if it's the only place setting CORS headers.
Environment Variables: Make sure that the FRONTEND_URL environment variable is correctly set in your .env file. It should match the origin of your client application, which is http://localhost:3000.
Middleware Order: Ensure that the CORS middleware is correctly registered in your app/Http/Kernel.php file. It should be part of the global middleware stack:
```
protected $middleware = [
    // Other middleware...
    \Fruitcake\Cors\HandleCors::class,
];
```
Clear Configuration Cache: If you've made changes to your configuration files, clear the configuration cache to ensure the changes take effect:
```
php artisan config:cache
```
Check for Duplicates: Ensure that no other middleware or service is setting the Access-Control-Allow-Origin header. This includes checking any custom middleware or third-party packages.

By following these steps, you should be able to resolve the CORS error. If the issue persists, double-check all configurations and ensure that no other part of your application or server is interfering with the CORS headers.