新鲜的 vue cli 项目出现奇怪的 CORS 错误答案

【问题标题】：Weird CORS errors on fresh vue cli project新鲜的 vue cli 项目出现奇怪的 CORS 错误
【发布时间】：2020-03-12 14:11:22
【问题描述】：

我刚开始构建我的第二个 Vue 项目，我第一次想使用 Vue CLI 和 NPM，而不仅仅是通过 CDN 加载 Vue。安装 CLI 和设置项目没有问题，但是当我在浏览器（最新的 Firefox）中运行“npm run serve”并导航到 localhost:8080 以查看它是否有效时，我在浏览器控制台中收到以下错误消息多次：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://10.126.86.51:8080/sockjs-node/info?t=1584021154635. (Reason: CORS request did not succeed).

加载页面后我也收到此错误消息：

[WDS] Disconnected!

有谁知道这些错误是什么意思，为什么我会得到它们以及如何摆脱它们？第一个似乎与应用程序使用主机的实际 IP 而不是 localhost 进行的某种跨域调用有关，但我想不出任何原因，因为我实际上只是安装并提供服务示例项目，运行“vue create”后没有任何改变

编辑：我在 Ubuntu 19.10 桌面上

【问题讨论】：

请提供minimal reproducible example
我认为这与 Vue 无关。不允许从您调用它的位置/主机（您的浏览器）调用您调用的 API 或 URL/IP 地址，这就是命令失败的原因。您是否也尝试过其他 API 网址？
不管怎样，sock-js 请求对于 CLI 项目来说是正常的（或者至少对我来说是这样）。我从来没有深入了解它的用途，但我一直认为它与热重装有关。即使我尝试使用 localhost，我也会看到 IP 地址。对我来说，请求成功没有问题，所以我没有收到错误消息。看起来您的请求使用的是https，而我的请求使用的是http，所以我想知道这是否只是导致它们失败的证书问题。
This article here might help you。这似乎是一个很常见的问题。

标签： javascript vue.js

【解决方案1】：

首先，您正在开发什么样的操作系统？如果您在基于 Unix 的系统上工作，服务（如 nginx）可能会产生此错误。如果是这样，请尝试停止它。

之后我会尝试从 vue ui 运行您的应用程序。

在终端输入：

vue ui

这将启动 vue cli 的基于 Web 的图形用户界面。您可以通过启动服务并运行构建命令从那里处理您的应用开发。

注意：您必须将项目（根文件夹）添加（导入，而不是创建）到 UI。

如果您在浏览器控制台中遇到同样的错误，请设置一个 vagrant box。这里解释了第一步：

https://www.vagrantup.com/intro/getting-started/

按照说明进行项目设置。

最简单的方法是运行

vagrant init

在您的项目文件夹中。因此，您不必设置新项目。

运行init命令后，尝试运行

npm run serve

如果您愿意，也可以改用 vue UI（如上所述）。

如果问题仍然存在，有关您的操作系统的更多信息会有所帮助。

【讨论】：

谢谢！使用 Vue UI 本身并不能解决问题，但是当我在“参数”中明确将主机设置为“localhost”时，错误消失了。请求仍然发生，但它们不会失败。所以这解决了这个问题。我猜出于某种原因，开发服务器默认在一个地方使用 localhost 而在另一个地方使用实际 IP。