Laravel 8 back end and Vue 3 Frontend cors error on deployment (heroku)

Question

My laravel backend and Vue js front end applciations are running on seperate servers. locally it's working very fine, but on deployment i keep getting this error

Access to XMLHttpRequest at 'https://akademiaapi.herokuapp.com/api/country/' from origin 'https://akademiaadmin.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

this is my Laravel configuration for cors and middleware

'paths' => ['api/*', 'sanctum/csrf-cookie'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

for middleware

protected $middleware = [
    \Fruitcake\Cors\HandleCors::class,
    // \App\Http\Middleware\TrustHosts::class,
    \App\Http\Middleware\TrustProxies::class,
    \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
    \App\Http\Middleware\TrimStrings::class,
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];

My vue js configuration

import axios from 'axios'

let Api = axios.create({
    baseURL: "https://akademiaapi.herokuapp.com/api"
})

Api.defaults.withCredentials = true

export default Api

i've tried every possible solution shown online, please i really need assistance as this has eating lots of time into my deadline already

i've even added to my route file, but still didn't work

header("Cache-Control: no-cache, must-revalidate");
header('Access-Control-Allow-Origin:  *');
header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');