报错Invalid Host/Origin header 【[WDS] Disconnected】

启动vue2项目时，控制台一直报错Invalid Host/Origin header

原因

这个错误 “Invalid Host/Origin header” 通常出现在你尝试从一个源（origin）访问另一个源的资源时，而后者的
CORS（跨源资源共享）策略不允许这样做。这是一个安全机制，防止恶意网站访问或修改敏感数据。

这个错误也可能出现在你使用 webpack-dev-server 进行本地开发时。webpack-dev-server
默认只允许来自本地主机的请求。如果你尝试从其他设备（例如手机）或其他主机访问你的开发服务器，你可能会看到这个错误。

解决办法一

你可以通过修改 webpack-dev-server 的配置来解决这个问题。你需要在你的 webpack 配置文件中添加一个 devServer 字段，然后设置 disableHostCheck 为 true
module.exports = { // ... devServer: { disableHostCheck: true, // ... }, // ... };
这将禁用主机检查，允许任何主机访问你的开发服务器。请注意，这可能会带来安全风险，因为它允许任何人访问你的开发服务器。你应该只在你完全理解这个设置的含义，并且你的开发环境是安全的情况下使用它。

解决办法二

如果你只是想从特定的主机访问你的开发服务器，你可以使用 allowedHosts 选项来指定允许的主机：
module.exports = {
// …
devServer: {
allowedHosts: [
‘host.com’,
‘subdomain.host.com’,
‘subdomain2.host.com’,
// …
],
// …
},
// …
};
在这个例子中，只有 host.com、subdomain.host.com 和 subdomain2.host.com 能访问你的开发服务器