vue devServer Host检查配置

已于 2022-03-18 16:53:33 修改
阅读量2.9k 收藏 1
点赞数 2
文章标签： vue.js nginx 前端
于 2022-03-18 16:53:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011129030/article/details/123579032
版权

vue创建项目后需要使用nginx反向代理

配置这样一个功能

配置好nginx后报错

Invalid Host header

百度了一下 说是设置跳过 host 检查

devServer{

...

disableHostCheck: true

}

好的,复制粘贴,启动

然后

Starting development server...
 ERROR  ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
         - options has an unknown property 'disableHostCheck'. These properties are valid:
           object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, 
open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

直接报错,没有这个参数设置

用的cli3,各种查,最后在官方api中终于找到了这个

 原因是新的版本中去掉了disableHostCheck这个配置,改为白名单形式,然后配置为'all'后等价于disableHostCheck:true

这个事情教育我,实在找不到就去官方文档看看,哎

最后写一下完整的配置方便大家复制

allowedHosts: 'all'

Smile丶
关注
[webpack-cli] Invalid options object错误-webpack-dev-server在项目根目录的终端启动报错Invalid options object
angrynouse的博客
06-17 1754
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
【vue】devserver及其配置
m0_55070913的博客
06-18 2342
每次改代码都需要重新部署, 或者只改变修改代码行的效果 所以出现了devserver本地服务 为了完成自动编译，webpack提供了几种可选的模式 方式一：webpack watch mode方式二：webpack-dev-server(常用)上面的方式可以监听到文件的变化，但是事实上它本身没有自动刷新浏览器的功能的， 当然我们可以通过vscode使用live-server来完成这样的功能，但是我们希望不使用live-server的情况下，可以具备实时重新加载的功能 步骤： 1、安装npm install
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that d
m0_61582755的博客
02-18 2932
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
（已解决）报错：Invalid options object. options has an unknown property ‘disableHostCheck‘
最新发布
BrianGriffin的博客
09-02 263
在进行vue2项目打包上线时需要更改vue.config.js文件。
ValidationError: Invalid options object. Dev Server has been initialized using an options object th
mmwf__的博客
08-24 2万+
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
webpack配置报错Invalid options object. Dev Server has been initialized using an options object that...
m0_46165586的博客
08-21 6784
disableHostCheck是一个用于Vue CLI开发服务器的配置选项，用于禁用对主机检查的验证。在旧版本的Vue CLI中，可以使用这个选项来解决某些特定的网络环境下的配置问题。 然而，在较新的Vue CLI版本（4.x及以上）中，disableHostCheck选项被移除了，并且默认情况下主机检查是启用的。这是因为启用主机检查可以提高开发服务器的安全性，防止潜在的主机劫持攻击。
详解@Vue/Cli 3 Invalid Host header 错误解决办法
12-09
总之，`Invalid Host header`错误是由于Vue CLI的主机头验证机制触发的，可以通过配置`vue.config.js`或`webpack.dev.conf.js`来禁用这个检查。然而，为了安全起见，应当谨慎处理，并只在必要时采用这种方法。在日常...
vue-cli配置域名访问报错：Invalid Host header（无效的主机头）
qq_40678503的博客
10-21 2244
在开发vue-cli脚手架项目的时候，配置了host : 127.0.0.1 dev.com 想通过dev.com:8080去访问项目，dev.com这个域名后端已经配置好了跨域 但是访问的时候会报Invalid Host header（无效的主机头）错误 上解决方法： 要修改webpack的配置，在项目的根目录下增加vue.config.js 文件 module.exports = { productionSourceMap: false, devServer: { historyApi
vue内网穿透配置
yangzhijie0608的博客
04-15 1855
1,进入https://www.ngrok.cc/login.html获取隧道ID，启动sunny bat工具（内网穿透工具sunny ngrok） 2.在webpack.dev.conf.js文件下配置相关参数。 vue2:config文件夹下的index.js文件下配置 module.exports = { devServer: { port: 3000, // 端口 disableHostCheck: true, // 绕过主机检查 }, // lintOnSa
Vue Cli配置参考一vue.config.js
雄的博客
12-06 585
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。 这个文件应该导出一个包含了选项的对象： // vue.config.js module.exports = { // 选项... } 1. publicPath 从 Vue CLI 3.3 起已弃用 base...
【Bug】[webpack-cli] Invalid options object. Dev Server has been initialized using an options object t
Abby_lxf的博客
11-09 1172
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
Invalid options object. Dev Server has been initialized using an options object that does not match
weixin_53331942的博客
11-03 1万+
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.详细解决方案 (一)问题描述 今天运行项目时，报了一个非常 **的错误 上网查了一下，找到了这个文章 点击这里 （二）解决问题 于是在自己的项目中找到了如下的文件 将圈化的地方全部注释，再次 npm run dev 运行，发现OK了！ ...
webpack打包错误：webpack-cli configuration.output has an unknown property ‘mode‘
逝水经年的博客
05-07 2341
一、错误 错误内容 [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.output has an unknown property 'mode'. These properties are valid: object { assetModuleF
使用MOCKVUE中 VUE.CONFIG.JS报错OPTIONS HAS AN UNKNOWN PROPERTY ‘BEFORE‘. THESE PROPERTIES ARE VALID
naivebluee的博客
11-19 2243
mock.js
Invalid options object. Dev Server has been initialized...问题解决
热门推荐
weixin_44190874的博客
03-07 2万+
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
options has an unknown property ‘disableHostCheck‘. These properties are valid:
weixin_42418309的博客
04-24 1万+
提示：options has an unknown property ‘disableHostCheck’. These properties are valid: 根据报错提示 在webpack 5 中disableHostCheck应该被遗弃了 查看文档了解到需将 disableHostCheck:true 替换为 historyApiFallback: true, allowedHosts: “all”, 重新配置vue.config.js devServer: { historyApiFallba
Vue中使用Mock，解决因webpack高版本出现的vue.config.js配置问题：options has an unknown property ‘before‘.
06-24 3913
这是因为webpack 4.X版本以上改变了配置方式的原因，如果你使用了4.X以上，而vue.config.js的配置类似如下使用before，就会出现此问题（3.X以下版本用此设置）。解决办法： 1、改变vue.config.js中的配置写法为： 2、改变mock文件夹中的index.js写法为： 这样就解决了问题，参考webpack版本升迁文档截图.........
vue3 invalid host header
05-01
“无效的 host header（invalid host header）”是 Vue3 应用常见的错误提示信息，通常出现在应用部署到生产环境时。一般情况下，该错误的主要原因是由于在代理服务器或反向代理服务器中的配置问题所导致的。 通常情况下，本地开发时，Vue3 应用使用的是 webpack-dev-server 来运行和 debug。而在生产环境中，我们需要将应用部署到一个稳定的服务器上。为了将 Vue3 应用部署到生产环境中，我们通常会使用 Nginx、Apache 或者其他的服务器软件，以便对请求进行转发和负载均衡等。 在实际部署过程中，我们可能会遇到“无效的 host header”这个错误提示。这通常是因为代理服务器或反向代理服务器的配置中没有正确地设置相关的 host 头信息，或者设置的信息与实际情况不符所引起的。因此，我们需要修正代理服务器或反向代理服务器的配置。 如果使用 Nginx 作为反向代理服务器，我们需要在 Nginx 的配置文件中增加以下代码： ```nginx location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://your-server; } ``` 这样设置后，Nginx 将会使用真实的 host 头信息并将请求转发给指定的服务器。如果你使用的是其他的服务器软件，你也需要根据具体的情况进行相应的设置。 综上所述，“无效的 host header”错误提示通常是由代理服务器或反向代理服务器的配置问题所引起的。如果你在部署 Vue3 应用时遇到了这个问题，需要检查代理服务器或反向代理服务器的配置，确保 host 头信息的设置是正确的。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值