CORS 块 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?

Answer 1

You can handle CORS with set a proxy in vue config

vue.config.js

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

Answer 2

You should send the header Access-Control-Allow-Origin in all your responses from the server. I do not know Laravel pretty well, but it seems that only options are sending this response header.

You can debug this using your browser. Open the network tab and check if your server is sending the response header Access-Control-Allow-Origin within all requests.

Although this should solve the issue, you should remember that, in production, using a wildcard (*) for CORS is a bad practice and should be replaced by a whitelist when deploying your app