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

Question

同一个页面可能需要调用后台的好几个接口，以前 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

输入参数说明

省略

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

Answer 1

如果是使用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')

Answer 2

文章
这个文章里面有说到proxyTable搭配，开发也生产环境。不需要每个地址都单独配置，配置一下根目录就OK了。

Answer 3

Response for preflight is invalid (redirect)
请问下，我总是报这个错怎么回事呢？

var request = axios.create({
    baseURL: 'http://localhost:8080/',
    // baseURL: '',
    timeout: 30000,   
    withCredentials: true,
    headers: {
        "Content-Type": "contentType"
    }
});

config/index.js

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

Answer 4

您的问题解决了吗