关于webpack中proxy的总结

今天有人问我关于webpack中proxy相关的问题，于是我想着把proxy好好总结一下，分享给更多的人。

本文大纲：

1、用途

首先声明一下：proxy只用于开发阶段，说白了就是用于本地开发调试。
在开发阶段中，由于浏览器同源策略的原因，当本地访问后端就会出现跨域请求的问题，所以在webpack中配置一个开发服务器webpack-dev-server（后面简称devServer服务器），在devServer服务器中配置proxy，相当于浏览器发出请求时，会先到本地服务器devServer，然后devServer服务器做一个代理转发到对应的后端服务器上。注意：跨域是浏览器的安全策略，服务器之间是不存在跨域的。
我们先看一下简单的代理配置代码。

// ./webpack.config.js
module.exports = {
   
   
    // 开发服务器配置
    devServer: {
   
   
        port: 8080,
        proxy: {
   
   
            '/ws_payment': {
   
   
                target: 'http://api.pay.com/'
            }
        }
        // ...
    }
}

在项目中的应用，下面的请求会请求到 http://api.pay.com/ws_payment/h5/group/verify上

   submit () {
   
   
      this.$http
        .post({