一.问题描述在服务器部署启动了项目,页面显示Invalid Host header. 二.问题分析新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostname不是配置内的就不能访问. 三.解决方案1.跳过host检查在webpack.conf.js文件,devServer字段下添加disableHostCheck: true { devServer: { historyApiFallback: true, hot: true, inline: true,…

问题出现背景 做微信H5网页时,使用花生壳内网穿透进行调试时,打开网页显示:invalid host header 分析问题 这句话的意思是:无效的Host请求头: 因为在vue在调试时相当于启动了一个服务器以供我们访问(当我们build后,就可以放在我们自己的nginx等服务器) 测试环境下的webpack有一个host检查功能:webpack的devServer中 如果不配置host就无法访问,解决办法有好几种,可以去设置host,比如: 第一种解决方案 设置允许访问的域名 module.e…

由于要近期开发微信小程序,所以今天了解了一下这个netapp 内网映射这个东西,所以一开始自己就在网上看,然后想把环境部署起来,参考https://natapp.cn/ ,看了一分钟教程以后,然后自己也部署好了环境,但是本地服务跑的起来,但是 ,不能通过服务器的域名来访问,直接是显示 Invalid Host header 通过服务器域名访问时是显示Invalid Host header,这是由于新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostnam…

转自博客:https://www.cnblogs.com/cynthia-wuqian/p/8575401.html 1.MAC设置应用在127.0.0.1:80端口访问: config/index.js目录下修改host和port 然后sudo运行npm run dev:(mac的80端口是被自身分享应用占用的,使用的话需要root权限) sudo npm run dev 运行完后,在127.0.0.1:80下能访问应用了.但是,在www.yours.com下,页面上会出现"Invalid H…

适用场景: 在本地的Vue-cli3项目, 需要其他人浏览. 如果没有外网的服务器, 可以把自己的电脑当做服务器. 这时候需要外网的人能访问到自己的电脑. Mac内网穿透工具:natapp Invalid Host header 当启动了natapp以后, 就这个用natapp提供的域名, 来访问本地的127.0.0.0:8080(端口自己设置), 如果Vue项目启动, 外网就可以通过域名来访问Vue项目. 但是如果出现 Invalid Host header, 需要设置一下 // vue.co…

说明 使用 Nginx 的 upstream 对 Vue 项目做负载均衡时,代理的地址无法访问目标地址,且页面报错: Invalid Host header(无效主机头) 分析 检查 Nginx 的 nginx.conf 配置,如下: upstream sail{ server 127.0.0.1:8080; } server { listen 8081; server_name localhost; location / { root html; index index.html index.…

今天在linux上安装node,使用node做一个web服务器,在linux上安装各种依赖以后开始运行但是,出现了:Invalid Host header 的样式,在浏览器调试中发现是node返回的错误! 于是就百度,最后找到了一个解决的方法,(看的别人的). 是webpack-dev-server版本更新了的问题. 解决问题的方法: 添加配置信息 disableHostCheck: true // 启动服务 var app = new WebpackDevServer(webpack(conf…

0.设置自己的host文件,将127.0.0.1指向自己想要访问的域名 127.0.0.1 www.yours.com 1.MAC设置应用在127.0.0.1:80端口访问: config/index.js目录下修改host和port 然后sudo运行npm run dev:(mac的80端口是被自身分享应用占用的,使用的话需要root权限) sudo npm run dev 运行完后,在127.0.0.1:80下能访问应用了.但是,在www.yours.com下,页面上会出现"Invalid…

这几天做的一个项目,在这个项目的 js 方面,我将其分业务和功能的拆分成模块化,然后使用 webpack 来进行打包.(第一次在公司产品中使用 webpack) 然后使用了 webpack-dev-server 启了一个服务并且开了监听功能.端口是 8080 . 访问 webpack-dev-server 启动的 server,直接使用 localhost:8080 和 127.0.0.1:8080 都可以正常访问. 因为某种原因,我不能使用 localhost:8080 或 127.0.0.1…

这个主要是自己遇到很多次了,每次都去网上查改哪里,这次记到自己这里吧,以后把遇到的vue工具的一些问题都整理到这里 在vue中开发的项目有时候需要到手机上看效果,但是你配好本地端口之后,会出现访问内容 Invalid Host header 这时候需要在 webpack-dev.config.js中添加上这个 在 devServer中添加代码    disableHostCheck: true   第二个问题,配置本地端口访问 在config中修改这个 使用本地端口访问…