Natapp内网穿透部署本机服务器的JavaWeb项目流程

前言

看了这篇文章，你就可以让你的小伙伴远程访问你自己写的网站啦！真的很刺激很有成就感，赶紧试一试吧！其实类似的博客都还挺多的，但是我自己还是再总结一下吧！

正文

点击链接 https://natapp.cn/ ，在Natapp官网上注册个免费的账户：
官网：

点击右上角免费注册，流程就不说了，注册账号应该都挺有经验的。
注册完账号之后，可以购买隧道，如果有钱就买贵的，没钱就用这个免费的就好了。

点击免费隧道后，跳转到下面页面，切记这个端口号是你前端项目的端口号，要注意区别：

因为我的项目是前后端分离的，所以我写上的是前端Vue的端口。
拿到免费隧道后，点击我的隧道，然后记录下那个authtoken，这个在后面我们会用到。

然后点击上图中右下角位置的配置，进去做一下简单的配置：

主要就是注意一下那个本地地址和本地端口，本地地址一般都是自己的机器内网地址，而端口的话要看你项目用的什么端口号了。
最后，点击客户端下载：

下载那个windows的64位版本。
下载完后解压会得到一个.exe文件：

双击运行，出现如下：

这个时候输入下面的指令：
natapp -authtoken=
等于号后面接上你的authtoken，就是上面我们复制的那个东西，然后敲击回车：

然后中间那串标红的，http开头的那个框框里的就是外网可以访问的地址，它就对应了后面那个红色框里的本地的访问地址，意思就是，外网访问前面那个长的效果等同于后面这个。
然后还有一个问题，因为我是Vue项目，所以光上面那样之后访问会报Invalid Host header错误，然后找了很多解决方法，最后知道了在vue.config.js中加上下面这句就行：

然后别人就可以顺利访问你的网页啦，就是每次访问的速度都很慢（是真的很慢），如果没有耐心也可以直接买个贵的兄弟们。
题外话：
我感觉还有一个问题是，我的这个项目同时能够访问后端的数据交互，是因为我用了代理模式，也就是我的vue.config.js是这么写的：

// 跨域配置
module.exports = {
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 9876,
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:9090',     //代理的目标地址
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '/api': ''                     //选择忽略拦截器里面的单词
                }
            }
        },
        //内网穿透访问设置
        disableHostCheck: true
    }
}

感觉应该是代理了才能这么顺利访问后端，因为之前看经验贴有人是访问不了后端数据的…可能等我以后段位高点了会懂吧，就先这样。

总结

Over！