codeSendbox导入vue项目提示“Invalid Host header”

最新推荐文章于 2024-06-04 10:02:57 发布
最新推荐文章于 2024-06-04 10:02:57 发布
阅读量107 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54968142/article/details/134949056
版权
本文介绍了在Webpack5和Vue项目中配置devServer的两种方式：一是使用`allowedHosts`列表明确指定允许访问的域名，包括通配符；二是关闭host检查，适用于webpack4及早期版本。
摘要由CSDN通过智能技术生成

第一种方式配置白名单

  devServer: {
    allowedHosts: [
      'host.com', // 允许访问的域名地址，即花生壳内网穿透的地址
      '.host.com'   // .是二级域名的通配符   
    ],
  },

第二个就是不做校验，在vue.config.js中加入如下配置

devServer: {
    allowedHosts: "all",
 },

这个是webpack5中的配置，webpack4中的配置是

devServer: { disableHostCheck: true }

这个文章可能是webpack4或者更早，现在默认vue脚手架生成的都是webpack5，做参考。

参考文章

达拉~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-cli配置域名访问报错：Invalid Host header（无效的主机头）
qq_40678503的博客
10-21 2175
在开发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项目中出现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 = { devServer: { disableHostCheck: true } } 补充知识：vue中使用wangeditor富文本编辑器 1.先下载 编辑器 cnpm install wangeditor –save 2.用法： 2.1、html
vue项目中的“Invalid Host header”
彭世瑜的博客
01-06 2179
修改vue.config.js的配置 devServer: { disableHostCheck: true, }
内网穿透访问Vue项目的时候出现Invalid Host header解决办法
最新发布
零零七的博客
06-04 492
我用的是国内的sunny-ngrok. 使用非常简单, 根据官网操作就可以. Invalid Host header 当启动了sunny-ngrok的客户端以后, 就这个用sunny-ngrok提供的。, 来访问本地的127.0.0.0:8080(端口自己设置), 如果Vue项目启动, 外网就可以通过域名来访问Vue项目. 但是如果出现 Invalid Host header,, 可以把自己的电脑当做服务器. 这时候需要外网的人能访问到自己的电脑.
vue项目中报错“Invalid Host header”
我的米饭
03-31 634
转自：https://www.xuanmo.xin/details/2869 更改本机的HOST文件后，访问解析后的本地域名时报错 “Invalid Host header”， 解决方法：在vue-cli版本为2.x的情况下修改 webpack.dev.conf.js 中的 devServer 对象加入 disableHostCheck: true 即可转发成功 devServer: { disableHostCheck: true, } ...
vue 项目中访问出现 Invalid Host header
梦翼横空的专栏
07-28 307
vue项目使用访问正常因业务需要修改了一下host(C:\Windows\System32\drivers\etc\hosts)
详解@Vue/Cli 3 Invalid Host header 错误解决办法
12-09
在开发Vue.js应用程序时，你可能会遇到一个名为`Invalid Host header`的错误，尤其是在使用@Vue/Cli 3工具链时。这个错误通常出现在你尝试在非标准的或自定义的HTTP主机头环境下运行Vue CLI的开发服务器时。在本文中...
vue 项目穿透 invalid host header disablehostcheck: true无效
08-09
当我们在Vue项目中遇到"Invalid host header"错误时，可以尝试使用"disableHostCheck: true"来解决。 通常情况下，这个错误是由于webpack-dev-server的host配置引起的。默认情况下，webpack-dev-server会检查请求的...
Vue CLl 出现 Invalid Host header
MW
03-20 218
产生原因 新版的webpack-dev-server增加了安全验证，默认检查hostname，如果hostname不是配置内的，将中断访问。 解决方案 在根目录下创建文件vue.config.js，然后填入如下内容 disableHostCheck: true, ...
vue内网穿透问题：Invalid Host header
楊帥
04-06 3007
问题背景： 为了能让外网访问我的电脑，使用了内网穿透Ngrok，然后用vue-cli3创建了vue项目，项目运行正常，用Ngrok提供的地址访问，Ngrok显示200访问成功，但是网页上确提示错误Invalid Host header 解决办法： 项目创建的时候是没有vue.config.js文件的，需要自己手动创建一个 然后编写： module.exports = { devServer: { open: true,//启动项目后自动开启浏览器 disableHostCheck:
vue 项目内网穿透报错Invalid Host header
weixin_46095200的博客
08-18 451
我在进行的时候遇到两个问题，一个是项目带不开，说服务器没有启动 另外一个是Invalid Host header 第一个问题解决： 项目要有跳转地址 第二个问题 在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true即可转发成功 devServer: { disableHostCheck: true, } vue-cli版本3.0的情况下修改vue.config.js的配置 module.expo.
vue项目本地映射到外网访问时出现 Invalid Host header
不忘的博客
11-19 1022
新版的webpack-dev-server增加了安全验证，默认检查hostname，如果hostname不是配置内的，将中断访问。通过公网访问本机运行的vue项目，访问时遇到的问题。
Nginx 代理Vue项目出现Invalid Host header
天河有尽后为涯，星海无边前作岸。
07-10 1800
使用 Nginx 的对项目做负载均衡时，代理的地址无法访问目标地址，且页面报错：Invalid Host header（无效主机头）
vue項目运行 报错 invalid host header
palmer_kai的博客
04-04 484
preview 该问题 第二次出现了，这里记录下， 方便查找 解决方式如下 在 webpack.dev.conf.js 文件中添加如下代码： disableHostCheck: true 即可解决问题
Vue——解决 Vue 项目 invalid host header 问题
weixin_43551242的博客
08-31 1746
解决 invalid host header 问题
解决vue项目中的“Invalid Host header”
踏上征程
03-29 893
最近在做一个微信公众号项目，用微信开发工具调试本地项目，需要做一下内网穿透，代理都配置好了，页面出现这个Invalid Host header错误，内网穿透工具我是用的frps做的，最后通过google找到方法，在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true即可转发成功。PS:本人五年工作经验想寻求长期兼职（远程办公）~有个人项目或企业项目部署维护类的老板可私聊我~
vue 解决Invalid Host header
weixin_41887312的博客
06-17 194
vue 解决Invalid Host header 在build/webpack.dev.conf.js文件中，加上disableHostCheck: true、如下图：
Vue 项目中出现 Invalid Host header 解决办法
qq_44290077的博客
08-31 2152
问题提出 当使用 natapp ，对 Vue 项目进行内网穿透时，访问项目外网网址出现 Invalid Host header 情况。 解决方法 在项目的根目录下，应该有一个 vue.config.js 文件，如果没有直接新建一个，然后在其中加入配置 module.exports = { devServer: { disableHostCheck: true } } 再访问项目外网网址，发现问题已经解决。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值