CORS Block Laravel + VueJS Axios

Question

I am building my own API with Laravel version 7, though when I make a request to Laravel from vuejs (actually quasar), I'm getting: "Access to XMLHttpRequest at 'http://127.0.0.1:8080/api/login' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ".

Just for a dirty quick fix, I've try to add (to my top bootstrap/app.php file):

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');

I have also tried to add this to a middleware class like following:

return $next($request)
          ->header('Access-Control-Allow-Origin', '*')
          ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

The error still persists. What am I missing here?

try to send a OPTIONS request type from the same login route from postman or something & check its route, I don't think it is giving a 200, as first the browser sends a options request which should have Access-Control-Allow-Origin header which is saved by browser, then it calls the post method & confirms the request if it matches which in your case should match (you are using wildcard), then post request is allowed by browser thus removing the error — bhucho

Ari Shojaei Ari Shojaei · Accepted Answer · 2021-02-04T17:35:55

You can handle CORS with set a proxy in vue config

vue.config.js

module.exports = {
 devServer: {
  proxy: 'http://localhost:8080',
 }
}

CORS Block Laravel + VueJS Axios

2 Answers