摘要：在中看到文件加了，文件加了，緩存沒問題。再次訪問后端接口，接口，數據正常，問題修復。在接口返回數據量很大的時候，會遇到這種問題。

首先，查看兩次訪問，獲取到的文件是否相同。查看network，兩次訪問請求如下，可見兩次獲取到的app.js不是同一個文件。開始認為是瀏覽器緩存問題，查看如下資料知悉跟瀏覽器緩存無關。（瀏覽器緩存）

其次，查看app.js文件是否加了hash。在build/webpack.prod.conf.js中看到js文件加了chunkhash，css文件加了contenthash，js、css緩存沒問題。（webpack三種hash區別）

最后，排查index.html文件是否緩存，看到html文件中app.js文件還是引入的舊的hash文件。

解決方案：由于服務器緩存問題，有緩存是因為index.html被緩存了，導致瀏覽器不去加載最新的js，解決方法是讓運維配置下去掉index.html的緩存。（緩存問題討論）

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save
//在.babelrc配置
{
  "presets": ["@vue/app","@vue/babel-preset-jsx"]
}

報錯：Duplicate declaration "h" (This is an error on an internal node. Probably an internal error.)
解決方法

//在.babelrc配置，刪掉"@vue/babel-preset-jsx"
{
  "presets": ["@vue/app"]
}

問題描述：vue-cli3構建的項目，本地開發環境通過webpack中的devserver代理請求到后端服務，接口A返回如下兩種情況，其他接口均正常。但通過瀏覽器url直接訪問后端服務接口A，接口返回200，是可以拿到全部數據的。

Proxy error: Could not proxy request /xxx/list?pageNo=1&pageSize=10 from localhost:8080 to http://x.x.x.x:8108 (ECONNRESET).

{"code":"200","msg":"請求成功","success":true,"data":{"total":107,"list":[{...},...,{"id":132,..."name":"賬戶?Proxy error: Could not proxy request /eventNotifyPerson/list?pageNo=1&pageSize=10 from localhost:8080 to http://172.16.21.237:8108 (ECONNRESET).

查看Node.js Error中詳細解釋：

ECONNRESET (Connection reset by peer): A connection was forcibly closed by a peer. This normally results from a loss of the connection on the remote socket due to a timeout or reboot. Commonly encountered via the http and net modules.

問題排查：

確定是否數據有異常：讓后端在數據庫里刪掉id為132的這條數據，發現問題仍然存在；

確定是否前端代理有問題：后端將程序發布到dev環境，前端代理不變，接口返回200，數據正常。

后端問題排查，wireshark抓包發現http傳輸，數據包沒傳輸完，連接就斷開了。

嘗試在前端請求頭中加Connection: Keep-Alive。一開始嘗試在axios請求中加，添加方式如下：

axios.defaults.headers["Connection"] = "Keep-Alive"

控制臺報錯：[圖片]

換另外一種方式：[圖片]

瀏覽器看到是：Connection: Keep-Alive

但抓包中顯示：connection: close，難道是加的不對，沒生效？又參考(axios的api文檔),在接口的config中添加，結果還是一樣。

查找資料HTTP Keep-Alive模式，發現瀏覽器keep-alive機制如下：

查看抓包中的http請求是1.1版本，理應會是默認開啟keep-alive的，隨后找后端確認，原來雖然瀏覽器發出的時候，keep-alive是默認開啟的，但經過webpack的代理轉發，keep-alive被關閉了，代理將這個值設置為了close，隨后查找資料，深入分析vue的webpack代理設置：vue.config.js中的devServer.proxy實際使用的是http-proxy-middleware中間件，查看配置項，修改devServer如下：

查看wireshark抓包內容，確認proxy的Connection: Keep-Alive，添加成功。

再次訪問后端接口，接口200，數據正常，問題修復。

初步結論：瀏覽器會默認開啟keep-alive，所以通過瀏覽器url訪問可以拿到全部數據，但是經過webpack的代理轉發，keep-alive被關掉了，要在這里設置開啟。在接口返回數據量很大的時候，會遇到這種問題。

問題反思，雖然這樣接口正常了，但是在開發其他項目的時候，數據量有比這個更大的，在proxy中從來沒有加過keep-alive。

再次確認是否是后端問題：后端把服務部署到本地的tomcat下，前端代理不加keep-alive，接口返回200，數據正常。

最終結論：原來后端服務是部署在jetty下，dev環境是部署在tomcat下（聽后端專家說：jetty提供的數據包保存在內存中，發送給前端，包還沒發完，就被jetty給關掉了，導致抓包中數據丟失；而tomcat會保證數據數據全部發送給前端，所以dev環境正常），所以會出現訪問后端本地，接口500，訪問dev環境接口200，最終確認是后端jetty配置問題導致。