vue-cli配置域名访问报错：Invalid Host header（无效的主机头）

最新推荐文章于 2024-03-29 18:15:45 发布

不认输的西瓜

最新推荐文章于 2024-03-29 18:15:45 发布

阅读量2.2k

点赞数 2

分类专栏： vue 文章标签： vue-cli Invalid host header 无效主机头

本文链接：https://blog.csdn.net/qq_40678503/article/details/109206981

版权

在使用vue-cli开发时遇到通过域名dev.com:8080访问项目报Invalid Host header错误。解决方法是在项目根目录创建vue.config.js文件，调整webpack配置以允许指定域名。

摘要由CSDN通过智能技术生成

在开发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: {
   
    historyApiFallback: true,
    watchOptions: {
    aggregateTimeout: 300, pol

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不认输的西瓜

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误

念兮为美

02-26

1万+

全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误。Invalid Host header是一个常见的错误信息，通常发生在`Web`应用程序中。它表示HTTP请求中的Host header（主机头）与实际请求的主机不匹配，这可能是由于代理服务器或负载均衡器等网络设备引起的。通过检查你的应用程序配置并确保正确的主机名，你应该能够解决此问题。无论你采取哪种解决方案，请务必小心。确保你理解你所做的更改，并在测试之前备份所有配置文件和代码。

详解@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 } 最后

1 条评论您还未登录，请先登录后发表或查看评论

Webpack "Invalid Host Header"

canglingyue的专栏

02-02

1093

webpack-dev-server 在更新后启动项目报”Invalid Host Header” 错误。是由于webpack更新主要是新增了对 host header 的正确性检测，以屏蔽未经授权的访问。开发者需要在执行 webpack-dev-server 命令时手动添加 –public 选项，取值为授权的 host，否则就回出现问题解决方案官方提供了两个解决方案：执行

解决vue-cli脚手架访问出现“Invalid Host header”

看到我在玩请叫我去敲代码的博客

04-22

3180

在使用vue-cli脚手架创建项目之后，如果通过内网映射把项目放到公网上去访问的时候会出现“Invalid Host header”的错误。这个是因为webpack为了安全而设计的，如果你不会webpack也没有关系。vue-cli很贴心的提供了一些配置，可以很快速的解决这个问题。这里我们可以参考：https://cli.vuejs.org/config/#vue-config-js 我...

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

最新发布

踏上征程

03-29

1060

最近在做一个微信公众号项目，用微信开发工具调试本地项目，需要做一下内网穿透，代理都配置好了，页面出现这个Invalid Host header错误，内网穿透工具我是用的frps做的，最后通过google找到方法，在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true即可转发成功。PS:本人五年工作经验想寻求长期兼职（远程办公）~有个人项目或企业项目部署维护类的老板可私聊我~

vue-cli 解决Invalid Host header

weixin_30877181的博客

12-21

224

在webpack.dev.conf.js中添加：disableHostCheck: true devServer: { public: 'local.kingsum.biz', clientLogLevel: 'warning', historyApiFallback: true, hot: true, compress: true, host: HOST ||...

内网穿透 vue出现 Invalid Host header 错误提示解决办法

时不我待

02-27

940

最近发现新浪的SAE可以支持创建NODE环境应用，于是想将本地的VUE项目部署上去体验一下效果，结果是折腾了一上午，遇到了各种环境问题，解决了各种插件版本问题，终于可以启动服务器了，最后打开页面却提示 Invalid Host header。又是一通百度，最后找到了如下的解决办法，以下内容是原文照搬的，最后有原文地址。

vue-cli Invalid Host header

weixin_34152820的博客

04-16

338

为什么80%的码农都做不了架构师？>>> ...

解决vue项目中出现Invalid Host header的问题

01-18

vue-cli版本3.0的情况下修改vue.config.js的配置 module.exports = { devServer: { disableHostCheck: true } } 补充知识：vue中使用wangeditor富文本编辑器 1.先下载编辑器 cnpm install wangeditor –save ...

Invalid Host header

胡聊前端的博客

03-04

639

webpack-dev-server会校验域名，来防止DNS rebinding攻击。本地绑定host就会导致出现Invalid Host header 禁用即可 devServer: { disableHostCheck: false, },

Vue-cli搭建项目访问出现Invalid Host header

weixin_42207182的博客

06-30

227

Vue-cli搭建项目访问出现Invalid Host header 原因：是因为新版webpack-dev-serve的安全机制，会检查hostname。解决方法：关闭HostCheck 进入项目build文件夹，打开webpack.dev.conf.js文件，在devServer配置项添加： disableHostCheck: true ...

vue-cli将127.0.0.1只指向www.***.com 报错Invalid Host header

liuying93的博客

06-26

1377

在window系统下 C:\Windows\System32\drivers\etc 修改hosts文件将127.0.0.1指向了一个域名然后运行得时候就报了一个错误Invalid Host header出现这个得原因是因为新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。解决方法找到build/webpack.d...

vue项目中的“Invalid Host header”

彭世瑜的博客

01-06

2187

修改vue.config.js的配置 devServer: { disableHostCheck: true, }

Invalid Host header 问题解决