内网穿透技术初探

内网穿透技术初探

需求场景：

因为个人vue和springboot开发过程中经常会遇到一些百度无法解决的问题，向”大佬“请教的时候经常需要大费周章的描述，有时候无法准确进行描述。如果将项目打包到服务器又非常的耗费时间，于是想着利用内网穿透技术来方便问题描述和解决。

（项目甲方乙方对接）

内网和外网

内网：

即所说的局域网，比如学校的局域网，局域网内每台计算机的IP地址在本局域网内具有互异性，是不可重复的。但两个局域网内的内网IP可以有相同的。

外网：

即互联网，局域网通过一台服务器或是一个路由器对外连接的网络，这个IP地址是唯一的。也就是说内网里所有的计算机都是连接到这一个外网IP上，通过这一个外网IP对外进行交换数据的。也就是说，一个局域网里所有电脑的内网IP是互不相同的,但共用一个外网IP。

公有地址(Public address)：

由 Inter NIC(Internet Network Information Center 因特网信息中心)负责。这些 IP 地址分配给注册并向Inter NIC提出申请的组织机构，公有 IP 全球唯一，通过它直接访问因特网(直接能上网)。

私有地址(Private address)：

属于非注册地址，专门为组织机构内部使用，说白了，私有 IP 不能直接上网。

而我们平时通过运营商(电信、移动、联通宽带等)上网，家里面通过路由器分出来的 IP 都是私有 IP(局域网 IP)，大家可能会疑问，我们可以上网啊，怎么会是私有 IP 呢?租用(申请)公有 IP 是需要钱的。 运营商买了一些公有 IP，然后通过这些公有 IP 分出来，再分给一个一个的用户使用。这个过程有点类似于，我们去安装了宽度，通过路由器分出几个 IP，让好几个人都能上网，当然运营商通过公有 IP 分出来的过程肯定比这个复杂多了。所以，我们平时上网用的 IP 是私有 IP，真正拥有公有 IP 的是运营商(当然，我们可以租用一个公有 IP )。所以，A 家庭的局域网 IP 和 B 家庭的局域网 IP 相同很正常，但是，最终 A 和 B 能上网(数据走出去)还是通过运营商的公有 IP，毕竟，公有 IP 的资源有限，这一片区域的用户使用的很有可能(实际上就是这样的)是同一个公有 IP.

内网穿透原理

对于内网来说，其不是不能主动访问公网端口，而是不能反过来有效的被公网访问。内网穿透的主要思路就是利用这一点，让在内网的节点主动访问一个拥有公网IP地址的服务器，并由中间服务器搭桥，打通经过该服务器从其他主机到NAT之后节点的隧道。

使用工具

natapp

（ngrok因为需要2块钱的实名认证费没有用）

个人配置过程：

技术栈：vue+springboot+natapp

natapp配置:

natapp官网进行注册，然后进行实名认证

点击进入免费隧道

免费版不支持绑定自己的域名，本地端口即为自己需要映射的本地端口。

免费购买成功后得到authtoken为后面内网穿透所需要的凭证。

下载natapp的客户端

启动方法有两种：

一种是运行natapp.exe文件

在命令框输入natapp -authtoken=刚刚复制的authtoken

另一种是在同级目录下创建config.ini文件

​

authtoken= 刚刚复制的authtoken                 #对应一条隧道的
clienttoken=                    #对应客户端的clienttoken,将会忽略authtoken,若无请留空,
log=none                        #log 日志文件,可指定本地文件, none=不做记录,stdout=直接屏幕输出 ,默认为none
loglevel=ERROR                  #日志等级 DEBUG, INFO, WARNING, ERROR 默认为 DEBUG
​

配置上面选项，后面直接运行exe文件即可自动链接

Online即为穿透成功

Forwarding http://byiki3.natappfree.cc -> 127.0.0.1:8080

随机分配的公网ip->映射的本地端口

natapp能够免费注册两个authtoken，意味着只能内网穿透两个端口，能够满足一般的前后端分离项目。

多开内网穿透需要将exe和config.ini复制到与第一个穿透非同级的目录，将config里面的token修改即可

vue配置:

在vue.config.js中配置：

module.exports = dfenefineConfig({
  devServer: { 
    allowedHosts:'all',
    port: 8080,
    host:"127.0.0.1",
    proxy: {
           '/api':{  
                       //设置代理，必须填
             target: 'http://server.natappfree.cc:37792/',     //运行springboot端口内网穿透得到的公安ip
             changeOrigin: true,              //是否设置同源，输入是的
             pathRewrite: {                   //路径重写
               // '^/api': '/api'
                '/api': ''                     //选择忽略拦截器里面的单词
            }
        }
    },
  }
})

​

webpack和vue-cli出于安全考虑，默认检查hostname，需要配置一下，否则dev命令后会出现报错。

因为我的项目使用的是vue-cli所以需要在vue.config.js里面devserve添加一项配置：allowedHosts:'all',这样就可以跳过hostname检查。

对于使用webpack的项目需要在build目录下的webpack.dev.conf.js文件，devServer下添加disableHostCheck: true，跳过检查；

也可以在package.json文件修改scripts命令dev:webpack-dev-server --disableHostCheck=true

注意项目使用的打包方式，使用错误的话打包会一直出错

在main.js配置axios

axios.defaults.baseURL = 'http://server.natappfree.cc:37792/'P
//baseurl为springboot端口穿透获取的随机公网IP

我因为另外封装axios,所以在requestrequest.js里面修改：

const request = axios.create({
    baseURL: "http://server.natappfree.cc:37792/",
    //baseurl为springboot端口穿透获取的随机公网IP
    timeout: 5000
})

至此配置完成，因为每次启动natapp获得的都是随机分配的公网ip，所以先获取springboot项目的ip，进而修改前端代理ip。

springboot配置：

暂时用到的技术不需要修改。

内网穿透数据库同理。