问题描述

公司内部自用项目(前后端分离),部署在重庆,深圳总部需要访问。使用frpc配置内网穿透后,项目无法登陆。

问题排查
  • f12后发现login请求地址是localhost:8080,但深圳这边发现并无此项服务。所以得出原因,因为项目前后端分离,所以frpc虽然可以映射到初始页面,但后续的api接口地址都是直接写死在js内,所以得不到正确的路径。
解决方案
  • 使用vuex,axious配合解决问题。在第一次login登录失败时,在axious内部catch使用vuex直接commit,将api地址改为映射地址。这样就可以保证后续项目可以正常访问。

  • 代码如下:

      this.$axios({
          method: 'POST',
          url: this.$store.state.apiAddress + '/login',
          data: {
            uid: values.uid,
            password: values.password
          }
        })
          .then(response => {
            // console.log('获取的返回值:', response)
            if (response.data.code === '0') {
              this.$router.push('home')
              this.$store.commit('setAdmin', response.data.data.admin)
              // console.log('当前的权限标志:', this.$store.state.admin)
            } else {
              this.$notification['warning']({
                message: '登录失败',
                description: response.data.msg
              })
            }
          })
          .catch(err => {
            console.log(err)
            /* this.$notification['warning']({
              message: '登录失败',
              description: '请检查网络或联系管理员解决'
            }) */
            this.$store.commit('changeApiAdderss')
            // this.handleSubmit()
          })
    
Logo

前往低代码交流专区

更多推荐