問題描述

• 一個古老項目，之前是基於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',
  }
},

結束語

• 這個問題哈還是挺好玩的，解決這個問題還是首席執行官幫忙解決的，主要是之前的思路都是錯的，一直沒有找到對的答案。哈哈
• 以前欠下的債，終有一天需要償還~