内网穿透工具(Frp)实现前端访问后端服务器

目录

概述

第1步：工具实名认证，软件下载并登录

第2步：Idea设置好默认端口，测试接口并启动

第3步：工具创建编辑隧道

第4步：工具运行，在日志中找到frp-oil.top或ip开头的套接字

其他1：用apifox（apipost等等）测试连接

其他2：前端vue-element-admin框架解决跨域问题

概述

做小组项目时，后端的组员采用内网穿透的方法给我们前端成员的服务器url。网上教程很多但是乱，最开始的小组项目还是用的wifi热点，很搞笑，每天都得改地址，/(ㄒoㄒ)/~~

1. 前端：vue-element-admin后台管理系统开源项目。   文档地址https://panjiachen.github.io/vue-element-admin-site/zh/guide/
2. 后端：自己的springboot-javaweb。
3. 内网穿透工具：SakuraFrp，自己搜放链接说广告宣传

---

第1步：工具实名认证，软件下载并登录

• 要支付宝1元，经过刷脸实名认证。

• 把首页的密钥复制到软件设置中。

---

第2步：Idea设置好默认端口，测试接口并启动

• src/main/resources/application.properties文件中修改，这里用默认的8080。

• 这里使用hello测试接口。然后自己运行访问localhost:8080测试一下。

---

第3步：工具创建编辑隧道

• 创建隧道选择一个通用节点即可。

• 编辑隧道首先选择TCP；然后写隧道名；然后填本地端口号8080（自己idea里设置的）；最后记得将自动HTTPS打开。

---

第4步：工具运行，在日志中找到frp-oil.top或ip开头的套接字

• 这就是前端连接的后端时使用的url了，至此结束。

---

其他1：用apifox（apipost等等）测试连接

• 成功返回hello结果。

---

其他2：前端vue-element-admin框架解决跨域问题

• 参考链接：vue-element-admin 前端解决跨域多代理设置方案 - 简书
• 它是用代理的方式解决的跨域问题，只需在vue.config.js文件里devServer里加上proxy配置，target就是上面第4步的后端url。不需要改动request.js里的baseurl，在proxy代理下会重定向访问target后端url。

module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'https://223.85.20.43:42785', // 后台接口域名
        changeOrigin: true, // 是否跨域
        logLevel: 'debug',
        pathRewrite: { // 重写路径 替换请求地址中的指定路径
          ['^' + process.env.VUE_APP_BASE_API]: '' // 将请求地址中的api替换为空
        }
      }
    },
    overlay: {
      warnings: false,
      errors: true
    }
    // before: require('./mock/mock-server.js')
  },

---

也可以用工具进行MC，饥荒多人联机哦，可以在b站搜索教程，其中的ipv6方法校园网老是失败，就还是用内网穿透方法解决了。