Vue/Axios CORS 成功但响应为空

Posted 2023-03-04

【中文标题】Vue/Axios CORS 成功但响应为空

【英文标题】：Vue/Axios CORS success but response empty

【发布时间】：2019-03-01 01:18:42

【问题描述】：

我的 localhost:8000 上有一个 Laravel API，我的 Vue 在 localhost:8080 上运行。我使用 chrome 扩展使 CORS 工作，但这只是为了开发。现在我试图在没有该扩展名的情况下发出 CORS 请求。

在 laravel 中，我使用 barryvdh/laravel-cors 包。现在我的前端接受了我的 OPTIONS 请求，它执行了我的 GET 请求。例子：

所以他们都得到了 ok 状态。

但问题来了，我的回复是空的：

AND 我仍然收到关于交叉允许来源的错误：

现在我知道我的 api 可以正常工作，因为我已经使用使 CORS 工作的扩展对其进行了测试。有人可以向我解释这里出了什么问题吗？

【参考方案1】：

OPTIONS 响应上有 Access-Control 标头，它允许 javascript 发出 GET 请求。

GET 响应没有上面有 Access-Control 标头，因此 JavaScript 没有读取其中数据的权限。

【讨论】：

那么我应该怎么做才能添加它们，因为每次调用时都会从服务器设置标头？

“因为每次调用时从服务器设置标头”——它们不是。那就是问题所在。您需要修复服务器。

我使用 laravel，我有包 barryvdh/laravel-cors。它有一个配置文件，应该将标头添加到每个请求中。顺便说一句，它是一个中间件。你熟悉那个包吗？ （我已将 middelware 注册为全局，所以每条路线）

不，我不是。我对 php 知之甚少。

你可以通过应用它来全局启用它，就像包解释的那样：github.com/barryvdh/laravel-cors#global-usage 如果你不这样做，它只会添加一个全局预检，而不是每个响应的 cors。