webpack-proxyTable解决开发环境下跨域问题

发表于 | 分类于

vue开发期间的API代理

在 config/index.js 下设置

1
2
3
4
5
6
7
8
9
10
proxyTable: {
  '/list': {
    target: 'http://api.xxxx.cn',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/'
    }
  }
}
}

changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。

使用

例如我们需要请求 http://api.xxxx.cn/orderList/detail;

在写 url 时只需要写成 /list/orderList/detail 即可

vue-cli的这个设置来自于其使用的插件http-proxy-middleware

插件github