Vue前后端分离项目 临时端口内网穿透教程

工具:内网云

  1. 后台启动,跟据端口号获取穿透后地址,例如:8000 端口
    cmd+r 控制台执行ssh -R 80:127.0.0.1:8000 sh@sh3.neiwangyun.net
    在这里插入图片描述

拿取标注处地址,http和https都可以,填到vue配置地址的地方,这里的地址就相当于http://127.0.0.1:8000,无需写端口号
2. 前台启动,同样跟据端口号执行命令,然后拿到地址浏览器访问即可。

注意事项: 当出现invalid host header错误时,表示无效的Host请求头,此时需要在vue项目中的vue.config.js文件内的module.exports中加入如下配置:

// 在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true
  devServer: {
    disableHostCheck: true,
  }

重启项目,成功访问!

### 使用 NatApp 实现前后端分离项目内网穿透 #### 准备工作 为了实现前后端分离项目中的NatApp配置,确保已经完成以下准备工作: - 注册并登录[NatApp](https://natapp.cn/)账户[^4]。 - 下载适用于操作系统的NatApp客户端软件,并安装至本地计算机。 #### 配置后端服务 对于基于Spring Boot构建的后端应用程序,在执行`mvn clean package`命令编译完成后会得到一个`.jar`文件。此文件即为可独立运行的服务程序。将其放置于易于管理的位置以便后续操作[^1]。 启动该Java Web应用之前,请确认其监听地址已更改为0.0.0.0而非默认localhost,这允许来自其他设备的请求接入。修改方式通常是在application.properties或yml配置文件中指定server.address=0.0.0.0属性值[^5]。 ```properties # application.properties server.port=8080 server.address=0.0.0.0 ``` #### 启动NatApp隧道 打开终端窗口进入解压后的NatApp目录,创建一个新的tunnel连接指向上述正在运行的应用实例。假设目标端口为8080,则命令如下所示: ```bash ./natapp.exe -authtoken=<YourAuthToken> -local http 8080 ``` 其中<YourAuthToken>需替换为个人专属授权令牌,获取途径为登录NatApp官网后在我的主页查看。成功建立映射关系后将会获得一个公开可用URL用于外部访问。 #### 前端集成与测试 Vue.js等现代前端框架生成静态页面存放在/dist路径下。此时可通过调整index.html内的API基础路径来匹配新分配给后端接口的实际位置。例如采用环境变量形式定义base URL: ```javascript // .env.production.local VUE_APP_API_BASE_URL=https://your-natapp-subdomain.natappfree.cc/ ``` 最后一步是将打包好的前端资源部署到任意支持HTTP(S)协议传输的Web服务器上供浏览器加载显示。由于现在前后两端均处于互联网可达状态,因此能够顺利完成跨域AJAX调用验证整个流程是否通畅无阻[^3]。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程似锦吖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值