vue3.0解决vue项目中的“Invalid Host header”

最新推荐文章于 2024-07-25 16:11:15 发布
最新推荐文章于 2024-07-25 16:11:15 发布
阅读量3.7k 收藏 7
点赞数 10
分类专栏： vue3.0 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42418309/article/details/124380079
版权
在更新到Webpack5时遇到了一个错误，提示`disableHostCheck`属性不再被支持。根据官方文档，将`disableHostCheck: true`替换为`historyApiFallback: true`和`allowedHosts: 'all'`可以解决问题。在vue.config.js中进行了相应的配置更新，以确保DevServer正常运行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

出现错误：options has an unknown property ‘disableHostCheck’. These properties are valid:
在这里插入图片描述
根据报错提示
在webpack 5 中disableHostCheck应该被遗弃了
查看文档了解到需将 disableHostCheck:true
替换为
historyApiFallback: true,
allowedHosts: “all”,

重新配置vue.config.js

devServer: {
historyApiFallback: true,
allowedHosts: “all”,
}

Uniapp 持续出现 Invalid Host/Origin header 解决方法
码农研究僧的博客
04-02 218
出现这个问题通常是因为 Webpack Dev Server (WDS) 的 host 校验 导致的，可能的原因包括如下
详解@Vue/Cli 3 Invalid Host header 错误解决办法
12-09
我的host设置 报错如下： 解决办法： @Vue/Cli 3 在vue.config.js里加上 .disableHostCheck(true) vue-cli 在webpack.dev.conf.js里加上 devServer: { disableHostCheck: true } 最后
vue3 访问报Invalid Host header
xioxiwang的博客
07-25 349
在webpack 5 中disableHostCheck应该被遗弃了。查看文档了解到需将 disableHostCheck:true。重新运行：npm run serve 就可以打开了。报错Invalid Host header。重新配置vue.config.js。
vue-cli3访问出现Invalid Host header
每一个不曾起舞的日子，都是对生命的辜负
07-25 907
1、产生原因 新版的webpack-dev-server增加了安全验证，默认检查hostname，如果hostname不是配置内的，将中断访问 2、解决方案 进入vue项目目录下 -> 创建文件vue.config.js -> 内容如下： module.exports = { devServer: { disableHostCheck: t...
vue-cli3出现Invalid Host header的解决方案
赵天铭的博客
01-06 2万+
发现场景 最近用vue-cli3搭建了一个项目，结果一运行不停的报错，报错信息如下： Invalid Host/Origin header 而且同时还发现另外一个问题，就是热更新也失效了 产生原因 新版的webpack-dev-server增加了安全验证，默认检查hostname，如果hostname不是配置内的，将中断访问。 解决方案 在根目录下创建文件vue.config.js，然后填入如下...
【问题】前端 VUE3 Invalid Host header
我是Superman丶的博客
08-19 476
项目全局搜索devServer 在 devServer 里面添加 "disableHostCheck": true
解决vue项目中出现Invalid Host header的问题
01-18
在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true devServer: { disableHostCheck: true, } vue-cli版本3.0的情况下修改vue.config.js的配置 module.exports = { ...
vue-cli配置域名访问报错：Invalid Host header（无效的主机头）
qq_40678503的博客
10-21 2423
在开发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
vue3中Invalid Host header 内网穿透报错--问题解决
qq_39431131的博客
04-09 371
重新配置vue.config.js。// 跳过检查host。
Vue——解决 Vue 项目 invalid host header 问题
weixin_43551242的博客
08-31 1829
解决 invalid host header 问题
22/11/11 vue3内网穿透 Invalid Host header
Nighsloth的博客
11-11 509
vue3 invalid host header
使用vue vue-cli3 内网穿透(映射) 出现 Invalid Host header
qq_20472061的博客
01-11 3487
解决方案根目录下新建 vue.config.js 添加以下代码到vue.config.js文件下 module.exports = { devServer: { disableHostCheck: true } } OK 解决
@Vue/Cli 3 Invalid Host header 错误解决办法
weixin_34124577的博客
01-02 283
我的host设置 报错如下： 解决办法： @Vue/Cli 3 在vue.config.js里加上 .disableHostCheck(true) vue-cli 在webpack.dev.conf.js里加上 devServer: { disableHostCheck: true } 最后 ...
内网穿透vue项目的时候报错 invalid Host header
weixin_39531049的博客
05-27 777
内网穿透vue项目的时候报错 invalid Host header 解决办法： 在vue.config.js中 配置devserver 中添加 disableHostCheck: true 就会解决！
vue内网穿透问题：Invalid Host header
楊帥
04-06 3732
问题背景： 为了能让外网访问我的电脑，使用了内网穿透Ngrok，然后用vue-cli3创建了vue项目，项目运行正常，用Ngrok提供的地址访问，Ngrok显示200访问成功，但是网页上确提示错误Invalid Host header 解决办法： 项目创建的时候是没有vue.config.js文件的，需要自己手动创建一个 然后编写： module.exports = { devServer: { open: true,//启动项目后自动开启浏览器 disableHostCheck:
解决 Vue 项目 invalid host header 问题（两种方案）
热门推荐
无聊猿的博客
03-14 4万+
问题出现背景 做微信H5网页时，使用花生壳内网穿透进行调试时，打开网页显示：invalid host header 分析问题 这句话的意思是：无效的Host请求头； 因为在vue在调试时相当于启动了一个服务器以供我们访问（当我们build后，就可以放在我们自己的nginx等服务器） 测试环境下的webpack有一个host检查功能：webpack的devServer中 如果不配置host就无法访问，解决办法有好几种，可以去设置host，比如： 第一种解决方案 设置允许访问的域名 module.exports
vue报错Invalid Host header
weixin_30763455的博客
05-22 123
这个是因为webpack为了安全而设计的，可以修改项目build->webpack.dev.conf.js文件 搜索或者找到以下相关代码 添加一行代码 devWebpackConfig.devServer.disableHostCheck = true 即可 转载于:https://www.cnblogs.com/zhengyuanyuan/p/10906836.html...
解决vue项目中的“Invalid Host header”
qq_42794520的博客
06-08 815
vue-cli2.x版本 在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true即可转发成功 devServer: { disableHostCheck: true, } vue-cli3.0 vue-cli版本3.0的情况下修改vue.config.js的配置 module.exports = { devServer: { disableHostCheck: true } } ...
vue项目访问Invalid Host header
最新发布
02-09
### 解决 Vue 项目中的 `Invalid Host header` 问题 当在开发环境中尝试通过外部网络访问本地运行的 Vue 应用程序时，可能会遇到 `Invalid Host header` 错误消息。这通常发生在使用内网穿透工具（如 ngrok 或 sunny-ngrok）将本地服务器暴露给互联网的情况下。 #### 修改配置文件 vue.config.js 为了允许来自特定域或所有域的请求，在项目的根目录下创建或编辑 `vue.config.js` 文件，并添加如下配置： ```javascript module.exports = { devServer: { allowedHosts: 'all', // 允许所有主机连接 proxy: { // 可选：如果需要代理某些 API 请求 '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: {'^/api' : ''} } } } } ``` 此方法适用于 Webpack 版本较新的情况，其中 `allowedHosts` 参数用于指定哪些主机可以访问开发服务器[^4]。 对于旧版本 Webpack，则可能需要设置 `disableHostCheck` 属性为 `true`: ```javascript devServer: { disableHostCheck: true, // 不推荐用于生产环境 } ``` 需要注意的是，出于安全考虑不建议在生产环境下禁用主机名验证；仅应在受信任的内部测试场景中启用该选项。 #### 配置 .env 开发环境变量 另一种方式是在 `.env.development` 文件里定义一个名为 VUE_APP_DEV_SERVER_HOST 的环境变量并将其设为你想要使用的自定义域名或者 IP 地址： ``` VUE_APP_DEV_SERVER_HOST=your-custom-domain.com ``` 接着修改 `vue.config.js` 如下所示： ```javascript const HOST = process.env.VUE_APP_DEV_SERVER_HOST || 'localhost'; module.exports = { publicPath: '/', outputDir: 'dist', assetsDir: '', lintOnSave: false, devServer: { host: HOST, port: 8080, https: false, open: true, hotOnly: false, // ...其他配置项... }, }; ``` 这样做的好处是可以灵活切换不同的开发服务器地址而无需频繁更改源码。 ---
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值