内网穿透部署本地服务器（超简单并免费）

@tg

已于 2024-01-11 11:01:10 修改

阅读量689

点赞数 11

文章标签：服务器运维

于 2024-01-10 14:31:43 首次发布

本文链接：https://blog.csdn.net/m0_74060440/article/details/135501520

版权

本文详细介绍了如何在Natapp官网上注册并配置内网穿透服务，包括实名认证、购买免费隧道、下载客户端、运行本地服务器以及解决InvalidHostheader错误，重点讲解了Vue.js中的allowedHosts配置。

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

Natapp内网穿透部署本机服务器使用流程

Natapp官网：NATAPP-内网穿透基于ngrok的国内高速内网映射工具

首先是来到官网首页

来到注册页面进行注册账户

注册完成后来到进入登录页面

接收验证码，及设置个人名称页面

登录成功后进入首页点击--->实名认证--->购买隧道--->选择免费隧道

别忘了实名认证

免费隧道页面，一般选择使用web,根据自己需要选择使用即可

点击购买完成过后来到配置页面如下

接着是下载客户端，点击首页的 客户端下载 ，根据自己的电脑选择

下载完成后就是解压，然后就是运行端口

这里是启动本地服务器，命令行输入natapp -authtoken=authtoken密钥

authtoken是在我的隧道里面，直接复制即可

运行命令后，复制http://........free.cc 到浏览器即可

如果报错的话，Invalid Host header

vue.config.js 中加上下面这端代码就欧克了，亲测有效！！

设置allowedHosts，这个选项是设置允许访问开发服务器的主机列表。将其设置为 all 表示允许任何主机访问开发服务器。这个选项与主机检查相关，但它更精确地控制哪些主机可以访问开发服务器，而不是完全禁用主机检查。也可以设置多个主机

devServer: {
    host: 'localhost', 
    port: 8080,
    historyApiFallback: true,
    // 设置为 all 表示允许任何主机访问开发服务器 
    allowedHosts: "all"
  }

以下是我完整配置vue.config.js文件的代码，参考使用

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    host: 'localhost', 
    port: 8080,
    historyApiFallback: true,
    allowedHosts: "all"
  }
})