Ngork内网穿透，远程访问项目并解决Invalid Host问题_ngrok invalid host header

1.百度搜索Ngork

2、登录或注册

3、购买服务器

4、隧道管理

购买成功之后，点击隧道管理可以看到服务器的相关配置，最关键的就是隧道id。

5、下载客户端

看自己电脑是什么系统的和位数下载对应的客户端

6、下载解压并启动

双击打开Sunny-Ngrok启动工具.bat


7、运行服务器
输入之前服务器的隧道id

启动成功
注意：左边的地址是外网地址，右边是内网地址，以及项目对应的端口号。

8、出现Invalid Host错误

这是在本地通过设置域名访问vue项目时出现Invalid Host header错误
原因：

webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问，我们可以通过设置跳过host检查来解决该报错，具体如下：

1、1、vue-cli2创建的项目，在webpack.dev.conf.js中的devServer对象中添加如下设置：

// webpack.dev.conf.js
devServer: {
  disableHostCheck: true,
}

1
2
3
4
5

2、vue-cli3创建的项目，在项目根目录下创建vue.config.js文件：

// vue.config.js
module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

1
2
3
4
5
6
7

9、外网访问

访问成功，以后只要项目在运行，在任何地方都可以通过外网地址来随时访问项目。

参考文献
在本地通过设置域名访问vue项目时出现Invalid Host header错误
希望能够帮助你，感谢关注