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 '来自原点'http://localhost:8080' 已被 CORS 策略阻止：请求的资源上不存在'Access-Control-Allow-Origin' header。“。

只是为了一个肮脏的快速修复，我尝试添加（到我的顶级 bootstrap/app.php 文件）：

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

我还尝试将其添加到中间件 class 中，如下所示：

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

错误仍然存在。 我在这里想念什么？

Answer 1

您可以通过在 vue config 中设置代理来处理 CORS

vue.config.js

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

Answer 2

您应该在来自服务器的所有响应中发送 header Access-Control-Allow-Origin 。 我不太了解 Laravel，但似乎只有选项发送此响应 header。

您可以使用浏览器对此进行调试。 打开网络选项卡并检查您的服务器是否在所有请求中发送响应 header Access-Control-Allow-Origin 。

虽然这应该可以解决问题，但您应该记住，在生产中，对 CORS 使用通配符 (*) 是一种不好的做法，在部署应用程序时应该用白名单替换