Vuex Axios CORS Block Acess-control-allow-origin - laravel

Question

This is the error:
So, I make sure my backend API sends the acess-control-allow-origin header:
This my axios code:
loadTopSales ({ commit }) {
axios
.get('http://tms.test/api/top-sales', {
headers: {
'Access-Control-Allow-Origin': '*',
Accept: 'application/json',
Authorization: 'Bearer ' + this.state.token,
withCredentials: true
}
})
.then(items => {
commit('SET_TOP_SALES', items)
console.log(items)
})
.catch(err => {
console.log(err)
})
}
Please, help me. I've tried every question in stackoverflow
Check curl -v -x options
My backend set header
public function handle($request, Closure $next)
{
$headers = [
'Access-Control-Allow-Origin' => '*',
'Access-Control-Allow-Methods' => 'PUT,POST,GET,OPTIONS,ORIGIN',
'Access-Control-Allow-Headers' => 'Accept,Authorization,Content-Type,Origin,X-Auth-Token',
'Access-Control-Allow-Credentials' => 'true',
];
if ($request->getMethod() === "OPTIONS") {
// The client-side application can set only headers allowed in Access-Control-Allow-Headers
return Response::make('OK', 200, $headers);
}
$response = $next($request);
foreach ($headers as $key => $value){
$response->header($key, $value);
}
return $response;
}
This my answer I config CORS in iis
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept,Authorization" />
<add name="Access-Control-Allow-Methods" value="GET, PUT, POST, HEAD, OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>
</httpProtocol>

Answer 1

Seems like the API doesn't handle CORS preflight requests. It should return Access-Control-Allow-Origin header for OPTIONS method as well (alongside Access-Control-Allow-Methods) with 204 No Content.
You can check it with curl -v -X OPTIONS http://tms.test/api/top-sale.

Answer 2

You can try adding proxy for your API with http-proxy-middleware. Note that this will only work for local development only.
You'll get the user guide to use http-proxy-middleware here.
For vueJS specific usage, you can try https://forum.vuejs.org/t/vue-cli-3-how-to-properly-use-http-proxy-middleware/33723