webpack基础——proxy代理

只能在开发环境下使用
当请求某个地址时，前面的域名都是重复且长，除了包装请求工具之外，还可以通过 devServe 的 proxy 实现

module.exports = {
  devServer: {
    static: './dist',
    proxy: {
      '/abc': {    //当请求任何一个以 /abc 开头的地址时，都会往前面加上 http://baicu.com/
        target: 'http://baicu.com/',
        changeOrigin: true
      }
    }
  },
..............

没有上面配置时：

axios.get('http://www.baidu.com/abc/user')

和有上面配置时：

axios.get('/abc/user)

是同样效果

为了标志请求的路径，还可以在前面自定义一个名字，比方说 /api ，那就请求

axios.get('/api/abc/user')

在webpakc.config.js里需要再配置一项

devServer: {
    static: './dist',
    proxy: {
      '/abc': {    //当请求任何一个以 /abc 开头的地址时，都会往前面加上 http://baicu.com/
        target: 'http://baicu.com/',
        changeOrigin: true,
        pathRewrite： { //重写
          '/^api/': ''  //用正则把自定义的标志取出来，替换成'' 空字符串
        }
      }
    }
  },