使用灵曜内网穿透 免费实现外网访问内网Vue

### 配置 Natapp 实现内网穿透访问本地 Vue.js 应用 为了使外部网络能够访问本地运行的 Vue.js 应用程序，可以通过配置 Natapp 来实现内网穿透。具体方法如下： #### 准备工作 确保已经下载并安装了 Natapp 工具，并完成了必要的账户注册与实名认证过程[^5]。 #### 创建免费隧道 登录 Natapp 平台后，选择创建一个免费隧道服务实例，记录下生成的 `authtoken` 和分配给用户的唯一子域名信息，这些将在后续步骤中使用到[^3]。 #### 启动 Natapp 服务 在放置有 `natapp.exe` 文件及其对应的 `config.ini` 配置文件所在的目录下启动命令行工具，输入以下指令来激活连接： ```bash natapp -authtoken=your_authtoken_here ``` 其中 `your_authtoken_here` 替换为自己实际获得的令牌值。此时应该可以看到类似如下的输出表明已成功建立连接： ``` [INFO] Starting natapp... [TCP] Listening on :7000 [NAT] Tunnel is ready. ``` 这表示当前计算机上的指定端口已经被映射到了互联网上可被公开访问的位置上了。 #### 修改 Vue 项目的 Webpack Dev Server 配置 编辑位于项目根目录下的 `vue.config.js` 文件（如果不存在则新建），加入如下内容以便处理来自不同源请求时可能出现的安全策略问题： ```javascript module.exports = { devServer: { allowedHosts: ['.natappfree.cc'], // 允许特定主机头 disableHostCheck: true, // 关闭主机检查功能 proxy: { '/api': { target: 'http://your_subdomain.natappfree.cc', // 使用之前得到的子域名替换这里的占位符 changeOrigin: true, pathRewrite: {'^/api' : ''} } } } }; ``` 上述设置不仅解决了跨域资源共享(CORS)的问题，同时也让开发模式下的服务器接受来自任何地方发起的有效 HTTP 请求[^1][^2][^4]。 完成以上所有操作之后重启 Vue CLI Service 即可在浏览器中通过新获取到的公网 URL 访问正在本地调试的应用啦！