# 内网穿透技术初探

# 需求场景：

因为个人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

1
2
3
4
5
6

配置上面选项，后面直接运行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': ''                     //选择忽略拦截器里面的单词
            }
        }
    },
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

1
2

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

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

1
2
3
4
5

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

# springboot配置：

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

# 内网穿透数据库同理。

← Unicloud 阿里云服务器作图床微信订阅号开发 →