vue.js - vue-cli 配置 proxyTable 的问题，这样子是最佳解决方案吗？

问题描述

问 题

同一个页面可能需要调用后台的好几个接口，以前 nginx 时代，就是直接 host 一个真实的网址，然后 nginx 配置本地服务，例如我在浏览器输入
"http://abc.com"

实际上跑的是本地的代码，然后后台设置好了 Access-Control-Allow-Origin 之后，我就可以在直接调用所有接口都不跨域了

现在用了vue-cli些vue项目，也知道是在config的index.js文件里面更改

proxyTable: {
      '/api': {
        target: 'http://www.api.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

然后调接口的时候

this.$http.get('/api/menu/get_list').then(function(data){
   console.log(data)
})

这样子的话是不是以为着我每调用任何一个接口，都要这样子配呢，感觉这样子配置一不小心就写错路径了，虽然说这样子的话不用让后台写 Access-Control-Allow-Origin，我直接配置成接口的主域就行了，但是感觉总有一些不对经的地方，感觉还是太繁琐了，也许是我不能够理解这配置的精髓？

补充说明：

就是现实生活中，后端会给你一个接口，告诉你传哪些参数，像这样

URL

http://picup.xxxx.net/1/picture?method=upload

HTTP请求方式

POST

输入参数说明

省略

那我需要怎么配置才是合理高效的呢

解决方案

如果是使用vue-cli生成的开发环境，直接在config/index.js中，把proxytable里面配置成差不多这样,后面的api就都会走target

proxyTable: {
  '/api': {
    target: 'http://xxx',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}

当然，此时的api接口形式应该为/api/xxx,

补充回答：
config中配置：

proxyTable: {
  '/api': {
    target: 'http://picup.xxxx.net',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

请求:

get('/api/1/picture?method=upload')

这篇关于vue.js - vue-cli 配置 proxyTable 的问题，这样子是最佳解决方案吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！