Vue js axios get request error - Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present - vue.js

Question

I have done a simple get request using axios as follows
axios
.get('my api',{
withCredentials: true,
headers:{
'Authorization': 'token'
},
params:{
id:this.$route.params.id,
identity:this.$route.params.identity
}
}
And in the server side i added my local host ip and all to the allowed domains
http://localhost:8080
and the below things are my cors config
'Origin' => static::allowedDomains(),
'Access-Control-Request-Method' => ['POST','GET','OPTIONS'],
'Access-Control-Allow-Credentials' => true,
'Access-Control-Max-Age' => 3600,
'Access-Control-Allow-Headers' => ["Content-Type", "Authorization", "Access-Control-Allow-Methods", "Access-Control-Request-Headers"],
But i am still getting the error
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
The auth token is not getting on the server i think.When i try to disable the token , then it is working.So the token is making the issue.How can i solve this.Thanks in advance

Answer 1

Finally i found the answer.It was an issue of using cors along with authentication.I just added my cors filters above the authentication like below.Before it was below the authentication
public function behaviors()
{
$behaviors = parent::behaviors();
unset($behaviors['authenticator']);
$behaviors['corsFilter']=[
'class' => \yii\filters\Cors::className(),
'cors' => [
'Origin'=> ['http://localhost:8080'],
'Access-Control-Allow-Credentials' => true,
'Access-Control-Allow-Headers' => ['Authorization'],
],
];
$behaviors['authenticator'] = [
'class' => JwtHttpBearerAuth::class,
];
return $behaviors;
}