I have a laravel(8.12) backend application running on Xampp with PHP(8) on url http://localhost/testbe

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

My frontend is making get api via axios.

Axios configuration

const api = axios.create({
  headers: {
    "Content-Type": "application/json",
   },
  withCredentials: true,
});

The api is giving below error:

Access to XMLHttpRequest at 'http://localhost/testbe/api/v1/admin/roles' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

./config/cors.php

<?php

return [

    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,

];

./app/http/kernel.php

<?php

protected $middleware = [
        // AppHttpMiddlewareTrustHosts::class,
        FruitcakeCorsHandleCors::class,
        AppHttpMiddlewareTrustProxies::class,
        AppHttpMiddlewarePreventRequestsDuringMaintenance::class,
        IlluminateFoundationHttpMiddlewareValidatePostSize::class,
        AppHttpMiddlewareTrimStrings::class,
        IlluminateFoundationHttpMiddlewareConvertEmptyStringsToNull::class,
    ];


./