Vue Cli前后端分离项目，映射后前端无法访问接口

问题描述

公司内部自用项目(前后端分离)，部署在重庆，深圳总部需要访问。使用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()
        })