Good day, everyone! I have an issue with my Vue.js 3 mobile app which uses Capacitor runtime. There's no response from my Laravel API with Sanctum which hosted online. The following are my codes...

src/axios.js

import axios from ‘axios’;

const apiClient = axios.create({
baseURL: ‘https://cmy.backend_domain.com/api’,
withCredentials: false,
headers: {}
});

export default apiClient;

===========================

app/Http/Middleware/CorsMiddleware

header(‘Origin’), $allowedOrigins)) {
$headers = [
‘Access-Control-Allow-Origin’ => $request->header(‘Origin’),
‘Access-Control-Allow-Methods’ => ‘GET, POST, PUT, PATCH, DELETE, OPTIONS’,
‘Access-Control-Allow-Headers’ => ‘Content-Type, Authorization’,
];

if ($request->getMethod() == “OPTIONS”) {
return response()->json(‘OK’, 200, $headers);
}

$response = $next($request);
foreach ($headers as $key => $value) {
$response->header($key, $value);
}

return $response;
}

return $next($request);
}
}

=====================

`config/cors.php`

[‘api/*’, ‘sanctum/csrf-cookie’],

‘allowed_methods’ => [‘*’],

‘allowed_origins’ => [‘http://localhost’, ‘http://localhost:8080’],

‘allowed_origins_patterns’ => [],

‘allowed_headers’ => [‘*’],

‘exposed_headers’ => [],

‘max_age’ => 0,

‘supports_credentials’ => true,

];

`Can someone help me? I really need this for my clients.`