一开始根据正常情况下设置了proxyTable属性和全局创建axios实例如下。

proxyTable: {
        '/api':{
        target:'http://xxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
// 创建axios实例
const service = axios.create({
  baseURL: '/api/admin/', // api的base_url
  timeout: 5000 // 请求超时时间
})
-------------------------------------------------------------
问题解决:
去除pathRewrite
proxyTable: {
        '/api':{
        target:'http://xxxx.com',
        changeOrigin: true
      }
    }



/api 是本地路径和后端接口路径的匹配前缀,若后端接口给了/api这个前缀,可用上面的写法。

那么还有一种情况,是后端的接口没有我们想要的匹配项(前缀)’/api’,是直接的http://www.xxx.com/save/post,这样的接口,我们就要用到pathRewrite来重写地址,将本地路径上的带匹配前缀的路径:http://localhost:8080/api/save/post上的前缀’/api’转成 ‘ / '。以下第一种是网络上大部分推荐的,但是我亲测是无效的,估计他们多数用的上面的方法,没有实际使用下面的方法,LZ用以下第一种方法折腾了2天无果,后去看了webpack-dev-server的issue,无意义试通了接口,即下面第二种方法,当然也不排除第一种方法是我的版本问题而没有效果,所以如果大家试了第一种方法有效就当我的方法没说,如果无效,不妨试试我的第二种方法:

第一种方法(网上写的方法)
proxyTable: {
        '/api':{
        target:'http://xxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
第二种方法(亲测有效的方法)
proxyTable: {
        '/api/*':{
        target:'http://xxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }

即将上面的匹配项从 ‘/api’ 改成了 ‘/api/*’,至于为什么,我表示也没有搞明白,不过确实调通了代理,希望对大家有帮助

附上自己搜到的关于 vue-cli 中 proxyTable 无效的几个排查方向: 

  • proxTabtle 配置错误,比如:pathRewrite中配置 和自己网络请求中url写法不匹配
  • 电脑开着全局代理翻墙(有可能是网页,如chrome,火狐浏览器,也有可能shawdowsocks(开启了全局模式),将其退出)
  • 删掉node_modules 目录,重新 npm install 安装
  • 重启电脑
  • proxyTable的修改会无效,这时候可以尝试修改启动项目的端口,就在proxyTable属性配置的下面几行有个port: 8080,改成其他,例如8081,就会有效,然后再改回来就好(最好再执行下 npm run dev)。
  • 这个比较多人说了,就是要手动再执行一次npm run dev
Logo

前往低代码交流专区

更多推荐