vue-cli3 本地无法代理到生产环境的问题分析

问题描述

• 一个古老项目，之前是基于vuecli2 后来被我迁移到vue cli3, webpack 版本是4.46, vue-cli版本是4.4.4

• vuecli配置，之前这个配置是可以直接访问到生产环境的，后来同样的配置，无法代理到生产环境，问了下运维大哥，他说就nginx加了个认证来源而已，别的啥都没做，肯定是前端代理的姿势不对

解决办法

辗转反侧，经过一年终于解决了这个问题。因为我们的后台的架构做了docker迁移，流量先到了nginx ，然后再被转发到docker，比以前多了一层，所以需要在代理服务器上面再加上x-forwarder-for这个字段, 再加上nginx配置限制了请求来源，所以还需要加上origin字段 ，同时加上这两个字段，就可以成功代理到生产环境了

• 示例配置：
  

// 当前项目后台的上下文
'/testApi': {
  // 需要代理到生产环境的地址
  target: 'https://aa.bb.com',
  // 配置转发请求头
  headers: {
   // 我们服务nginx限制了来源，不需要可以不设置
   Origin: 'https://aa.bb.com',
   // 这里是多层转发服务器的配置通过这个字段把来源带进去
   // 具体可以看mdn：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Forwarded-For
   'x-forwarded-for': 'aa.bb.com',
  }
},

反思

• 仅仅局限于前端的思维，一直在思考为啥不行，没有从整体架构去思考问题的为何产生
• HTTP相关知识缺失，没有联想到代理服务器转发这一个点

思考过程，感兴趣可以看看

1. 谷歌大法搜不出来,该试的都试了，不行

2. 当然是去官网的issue里面看看咯

这是我离问题原因最近的一次，这个大佬提到了xfwd,当时我还特意去搜了一下这个东西是啥，但是没有往这个方面想，哈哈，完美错过,被自己蠢哭~

3. 代理插件配置问题导致的

百度了很久，发现还是没解决，最近有时间，准备再来看一下这个东西是啥问题，并且在下文中找到了问题的可能性，感觉快看到尽头了

通过这个大哥的启发，我觉得我和他应该是碰到了差不多的问题，然后我按照大哥们给的方案去尝试，发现还是差了一点，

4. 以为是http加密协议相关问题导致的

查看生成环境所用证书版本 TLS1.3 ： F12 ==> security 面板

之前可以的版本 https版本是TLS1.2, 感觉是vue cli 不支持代理到TLS1.3的问题

如何调试node_modules 里面的源码

百度一大推，发现不行，然后问了执行官，提点了一下

启动调试

启动服务，在node_module 需要调试源码的地方，打上断点，搞定

问题原因

一开始可以，是因为我们的服务器一开始只有一层nginx，然后就到对应的应用，后来不行，是因为服务器做了docker迁移，流量先通过域名找到nginx，然后nginx再转发到docker上面，并在nginx上加了Origin字段的限制，所以之前的代理设置失效。

一开始可以的vue proxy配置

后来经过多一层转发 vue proxy 的配置，必须在加上x-forwarded-for 就好了

• 示例配置：
  

// 当前项目后台的上下文
'/testApi': {
  // 需要代理到生产环境的地址
  target: 'https://aa.bb.com',
  // 配置转发请求头
  headers: {
   // 我们服务nginx限制了来源，不需要可以不设置
   Origin: 'https://aa.bb.com',
   // 这里是多层转发服务器的配置通过这个字段把来源带进去
   // 具体可以看mdn：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Forwarded-For
   'x-forwarded-for': 'aa.bb.com',
  }
},

结束语

• 这个问题哈还是挺好玩的，解决这个问题还是首席执行官帮忙解决的，主要是之前的思路都是错的，一直没有找到对的答案。哈哈
• 以前欠下的债，终有一天需要偿还~