1. 说明

当我们使用webpack-dev-server进行本地开发的时候，如何能使用真实的接口来访问数据呢？（前后端分离）

答案当然是代理(proxy)

2. 使用案例

• 普通代理

proxy: {
   '/api': 'http://172.16.24.105:8080'
}

说明：/api/user 现在会被代理到请求 http://172.16.24.105:8080/api/user

• 多组合并

proxy: [{
   context: ['/auth', '/api'], // 组合匹配的路由数组
   target: 'http://172.16.24.105:8080',
}]

说明：
/auth/user 现在会被代理到请求 http://172.16.24.105:8080/auth/user;

/api/goods 现在会被代理到请求 http://172.16.24.105:8080/api/goods;

• 路径重写

'/api': {
   target: 'http://172.16.24.105:8080',
   pathRewrite: {'^/api' : '/auth'} //路径重写
}

说明：/api/user 现在会被代理到请求 http://172.16.24.105:8080/auth/user

• 剔除部分

proxy: {
   '/api': {
      target: 'http://172.16.24.105:8080',
      bypass: function(req, res, proxyOptions) { // 条件判定
         if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
         }
      }
   }
}

说明：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理

• 跨域

proxy: {
   '/api': {
      target: 'http://172.16.24.105:8080',
      changeOrigin: true, //本地虚拟一个服务器接收你的请求并代你发送该请求（类似nginx）
   }
}

参考文档

webpack官网
pathRewrite参数说明
其他参考