原因：新版的webpack-dev-server出于安全考虑，默认检查hostname，如果它不是配置内的，将会中断访问。

-----------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------

解决：

1.打开Vue项目下的build目录，找到webpack.dev.conf.js这个文件

                        

2.找到图中位置，在此处加上这段代码：disableHostCheck : true

3.重新启动Vue项目：npm run dev 或者 npm start，即可正常使用

使用Vue 和 内网穿透：返回 invalid host header的更多相关文章

  1. 开发环境绑定host vue 返回 invalid host header

    事情:使用域名绑定host为本机电脑ip,vue返回 invalid host header 原因:新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostnam ...

  2. nodejs 项目，请求返回Invalid Host header问题

    今天在linux上安装node,使用node做一个web服务器,在linux上安装各种依赖以后开始运行但是,出现了:Invalid Host header 的样式,在浏览器调试中发现是node返回的错 ...

  3. 解决 Vue 项目 invalid host header 问题（两种方案）

    问题出现背景 做微信H5网页时,使用花生壳内网穿透进行调试时,打开网页显示:invalid host header 分析问题 这句话的意思是:无效的Host请求头: 因为在vue在调试时相当于启动了一 ...

  4. 内网穿透访问Vue项目的时候出现Invalid Host header解决办法

    适用场景: 在本地的Vue-cli3项目, 需要其他人浏览. 如果没有外网的服务器, 可以把自己的电脑当做服务器. 这时候需要外网的人能访问到自己的电脑. Mac内网穿透工具:natapp Inval ...

  5. SSH 端口转发+内网穿透

    用最直白的语言对本文所有内容进行定义: 端口转发(-L):用A机器(内网)登录B机器(公网), 在A机器打开端口,将收到的所有请求转发到B机器的某个端口 (在代理机上执行) 内网穿透(-R):用A机器 ...

  6. 分享下超实用的用skura frp做内网穿透的经验

    操作目的: 使无公网ip的主机能被外网访问,实现ssh对服务器的远程管理 硬件准备: 1.服务端:skura frp主机(skura frp 免费提供,有待创建) 2.客户端:接在无线路由器(内网)上 ...

  7. 一款带Web面板的轻量级、高性能内网穿透工具：nps使用教程

    说明:内网穿透工具之前已经介绍了不少了,比如Frp.lanproxy.Holer等,现在再介绍个带Web面板的穿透工具nps,之前叫easyProxy,只是改名了而已,该工具是一款使用go语言编写的轻 ...

  8. 前端内网穿透，localtunnel你值得拥有！

    一个前端在调试本地页面时,总会有些稀奇古怪的需求,比如产品立刻要看你的页面效果,而此时有没有上线环境折腾给他看,那此时通过内网穿透的方式,实时把你的项目生成一个在线链接丢给他,让他去找那一像素的bug ...

  9. 【python + NATAPP】实现内网穿透的简易数据传输

    1. 服务端 接收两张图像的地址,返回这两张图像的相似度 import os, shutil, requests import cv2 import numpy as np import imgs_s ...

随机推荐

  1. android: 根据文件uri 获取文件名

    public static String getFileRealNameFromUri(Context context, Uri fileUri) { if (context == null || f ...

  2. Python版GPA计算器

    最近在网申投简历时遇到一个需要计算GPA的问题,想起自己在上学时写的Excel公式版GPA计算器略显low,而且操作也比较复杂,于是一时兴起,写了个Python版的,在此分享给大家,也算是跟上时代的浪 ...

  3. Fleck WebSocket使用

    Fleck WebSocket使用 作为笔记存储. 最近公司有这方面的使用需求.在网上查了一些资料后.得到了想要的结果.以下记录摘抄至网上资料. 1.首先,服务端.项目NuGet直接引用Fleck类库 ...

  4. jquery中 $(xxx).each() 和 $.each()的区别，以及enter键一键登录

    1.$().each 在dom处理上面用的较多.如果页面有多个input标签类型为text,对于这时用$().each来处理多个text,例如: $("input[type=’text’]& ...

  5. 图解jvm--(四)内存模型

    内存模型 java 内存模型 很多人将[java 内存结构]与[java 内存模型]傻傻分不清,[java 内存模型]是 Java Memory Model(JMM)的意思. 简单的说,JMM 定义了 ...

  6. 五年C语言程序员，是深耕技术还是走管理？

    从进入程序员行列开始(2013年6月),到现在为止(2019年2月),已经有五年半了.    一路波折,已经从无知菜鸟走到了意识觉醒的老鸟了.    薪资变化情况如下: 2013年:2000元/月 ( ...

  7. 1146. Snapshot Array

    Implement a SnapshotArray that supports the following interface: SnapshotArray(int length) initializ ...

  8. android 支持上拉加载，下拉刷新的列表控件SwipeRefreshLayout的二次封装

    上拉加载,下拉刷新的列表控件,大家一定都封装过,或者使用过 源代码,我会在最后贴出来 这篇代码主要是为了解决两个问题 1.滑动冲突得问题 2.listview无数据时,无数据布局的展示问题 下方列出的 ...

  9. 如何往gitlab/github上游贡献代码

    Git 是一个开源的分布式版本控制系统,它能够记录每一次改动. 一些概念 仓库:git 中以仓库为单位:每个项目对应一个仓库,如 /eayuntest/Rally./eayuntest/stack 是 ...

  10. Hot Module Replacement [热模块替换]

    安装了webpack-dev-server后 , 配置 "start": "webpack-dev-server" 然后运行 npm start 会开起一个we ...