首先强调的是webpack proxy只能用作于开发阶段，临时解决本地请求服务器（通常是测试服）产生的跨域问题，并不适用线上环境。配置在webpack的 devServer属性中

配置在package.json的 proxy也一样

原理

一句话总结：本地服务器充当代理服务器，使得请求不受浏览器同源策略的限制。

webpack 的 devServer开启了本地服务器。配置了proxy之后，本地服务器作为代理服务器，每次请求都会被本地服务器拦截。
本地服务器帮我们向真正有资源的服务器发起请求，以此获取真正的资源，使得前端发起的请求不受浏览器同源策略的限制。

如果我们没有使用 proxy，请求是这样发送的

Webpack 的 Proxy - 图1

如果我们使用了 proxy，请求是这样发送的

Webpack 的 Proxy - 图2

webpack 的配置方法

代理到某个域名
```
module.exports = {
 //...
 devServer: {
     proxy: 'http://localhost:3000'
 }
};
```
这样写，发起的任何请求，都会代理到 http://localhost:3000
如果只想代理某类路径，比如说 /api
```
module.exports = {
 //...
 devServer: {
     proxy: {
         '/api': 'http://localhost:3000'
     }
 }
};
```
假如现在，对 /api/users 的请求会将请求代理到 http://localhost:3000/api/users

如果不希望代理 /api，就重写路径

module.exports = {
 //...
 devServer: {
     proxy: {
         '/api': {
             target: 'http://localhost:3000',
             pathRewrite: {'^/api' : ''}
         }
     }
 }
};

如果想将多个路径，用 context

module.exports = {
//...
devServer: {
 proxy: [
   {
     context: ['/auth', '/api'],
     target: 'http://localhost:3000',
   },
 ],
},
};

参考资料

《Webpack-dev-server的proxy用法》
《Webpack 官网 devServer》

前端知识库

Webpack 的 Proxy

原理

更多细节

webpack 的配置方法

参考资料