CORS 块 Laravel + VueJS Axios

Posted 2023-03-04

【中文标题】CORS 块 Laravel + VueJS Axios

【英文标题】：CORS Block Laravel + VueJS Axios

【发布时间】：2021-05-09 01:21:29

【问题描述】：

我正在使用 Laravel 版本 7 构建自己的 API，但是当我从 vuejs（实际上是类星体）向 Laravel 发出请求时，我得到：“访问 XMLHttpRequest at 'http://127.0.0.1:8080/来自 'http://localhost:8080' 的 api/login' 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。 ”。

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

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

我还尝试将其添加到如下中间件类中：

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

错误仍然存​​在。我在这里错过了什么？

【问题讨论】：

尝试从邮递员或其他东西的同一登录路径发送一个 OPTIONS 请求类型并检查它的路由，我认为它不会给出 200，因为首先浏览器发送一个选项请求，它应该具有由浏览器保存的 Access-Control-Allow-Origin 标头，然后它调用 post 方法并确认请求是否匹配在您的情况下应该匹配（您正在使用通配符），然后浏览器允许发布请求，从而删除错误

【参考方案1】：

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

vue.config.js

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

【讨论】：

产生错误* configuration.proxy should be an object: object … * configuration.proxy should be an array: [object … | function, ...] (should not have fewer than 1 item)

你没有解释你在配置文件中写了什么，但是this link可以帮助你

【参考方案2】：

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

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

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