理解webpack代理过程

问题场景

在本地vue项目的proxyTable中设置

proxyTable: {
  '/url': {
    headers: {
      token: 'token1'
    }
  }
}

然后在发送请求之前又修改请求头部的token为：'token2'，chrome的network中显示也是'token2'，假设‘token1’是正确的token，无论如何修改token中的数据都可以成功请求服务器，但是如果将proxyTable中的token改成错误的，即使在请求之前修改成正确的token也不能成功请求。why？？？

关于vue代理

首先想到的就是在webpack进行对请求转发的时候会不会修改了token？，使用whistle抓包分析之后可以看到由浏览器发送到localhost的请求头中token是token2，但是抓取由webpack发送的请求时看到头部已经变为token1，即在webpack转发过程中进行了头部的修改。

由于token是用于与服务器进行交互的时候用到的校验标志，所以在浏览器到webpack-server的时候token随便写些什么都不会发生错误。

vue代理与跨域

在本地开发中，由于使用浏览器调试，故无法跳出同源策略的限制，vue代理恰好解决了这个问题。简而言之就是：浏览器将请求先发送到同源的webpack中，然后webpack本地服务去请求服务器，服务器完成校验之后，webpack获取数据再转发回来，进而浏览器收到响应。