Laravel Sanctum Vue SPA CORS issue - laravel

Question

I've setup a VUE frontend which connects and authenticates perfectly well with a Laravel backend, using sanctum. I'm able to login and successfully retrieve the logged in user by visiting /api/user. I believe I've followed all the config steps stated in the documentation.
Here is sanctum.php config for stateful domains:
'stateful' => explode(
',',
env(
'SANCTUM_STATEFUL_DOMAINS',
'localhost,localhost:3000,localhost:8080,127.0.0.1,127.0.0.1:8080,::1'
)
), //this is what is in my env SANCTUM_STATEFUL_DOMAINS=app.foo-bar.test:8080
//my laravel backend is running on foo-bar.test
Here is my session.php config:
'domain' => env('SESSION_DOMAIN', null), //in my .env I have: SESSION_DOMAIN=.foo-bar.test
I have the sanctum middleware setup in http/kernel.php, and I'm using auth:sanctum in my routes
Here is my cors.php config:
'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'logout'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
and in my vue frontend, I've configured axios to use the following
axios.defaults.baseURL = 'http://foo-bar.test';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.withCredentials = true;
As I mentioned, I'm able to successfully login, and even visit /api/user. All works fine,
But when I make a post request to: api/users/multiple,
I get the CORS error: Access to XMLHttpRequest at 'http://foo-bar.test/api/users/multiple' from origin 'http://app.foo-bar.test:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I'm out of ideas, as it seems I've done all the necessary config. Perhaps I'm missing something ? Any help is appreciated.
Kind regards

Answer 1

Add a middleware
php artisan make:middleware Cors
In app/Http/kernel.php paste this in $middleware
protected $middleware = [
\App\Http\Middleware\Cors::class,
....
];
In Middleware/Cors.php now add
public function handle(Request $request, Closure $next)
{
return $next($request)->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods','GET, POST, PUT, PATCH, DELETE,
OPTIONS')
->header('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-
Type, Accept, Authorization');
}

Answer 2

What I came to realise was that this was not actually a CORS issue. If it was a CORS issue, I would not have been able to login, or visit the API that returns the currently logged in user.
What actually happens is that, chrome sometimes fails to report 500 errors on the API and rather returns CORS errors. When I tried making the API call on Firefox, I was able to actually see the 500 error.
Once I resolved the 500 error, the CORS error also stopped appearing in chrome.
What I've seen from this is that the network request error reporting on Firefox is more reliable than that on chrome