近期項(xiàng)目中遇到一個(gè)bug，其中解決過(guò)程比較有意思，特此記錄下來(lái)。有一天看到報(bào)警記錄有一個(gè)500服務(wù)端的錯(cuò)誤，量很少，一周都不一定有一個(gè)，先根據(jù)服務(wù)器里的本地日志拿到了當(dāng)時(shí)請(qǐng)求的相關(guān)信息像UA、cookie什么的，確定了請(qǐng)求是來(lái)自iPhone上的qq瀏覽器，因?yàn)槲覀儤I(yè)務(wù)在手機(jī)瀏覽器里沒(méi)有入口，所以這種情況很少。于是找來(lái)iPhone下載QQ瀏覽器嘗試復(fù)現(xiàn)問(wèn)題。

bug情景復(fù)現(xiàn)

描述：iPhone中某些版本的QQ瀏覽器中提交訂單時(shí)，報(bào)錯(cuò)提示服務(wù)端異常，經(jīng)抓包排查發(fā)現(xiàn)提交訂單時(shí)post請(qǐng)求的body為空，content-length為0，于是開(kāi)始了這次艱難蛋疼的bugfix過(guò)程。

其中手機(jī)是iPhone 8p，QQ瀏覽器版本9.1.0.4110，ios版本11.0，請(qǐng)求UA是Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0 MQQBrowser/9.1.0 Mobile/15B87 Safari/604.1 MttCustomUA/2 QBWebViewType/1 WKType/1。（雖然這些對(duì)這次后期排查修復(fù)都沒(méi)什么蛋用，但有時(shí)還是很有用的）。

思路

個(gè)人喜歡debug時(shí)用排除法，先確定問(wèn)題所在

首先排查發(fā)post請(qǐng)求過(guò)程有沒(méi)有問(wèn)題，因?yàn)橛锌赡芤蕾嚨哪硞€(gè)包在國(guó)產(chǎn)QQ瀏覽器上有兼容性問(wèn)題，但一路排查發(fā)起過(guò)程都沒(méi)什么問(wèn)題，最后不用依賴包，直接用XMLHttpRequest手寫(xiě)了個(gè)post請(qǐng)求依然不好使，排除了發(fā)請(qǐng)求的依賴包的問(wèn)題。

排查項(xiàng)目是否對(duì)發(fā)請(qǐng)求有影響，有些內(nèi)部的監(jiān)控上報(bào)的包可能會(huì)對(duì)XMLHttpRequest中方法做改寫(xiě)，于是一路刪除懷疑的依賴包，最后單純返回了一個(gè)簡(jiǎn)單頁(yè)面，頁(yè)面內(nèi)發(fā)一個(gè)post請(qǐng)求，body依然為空，至此排除了所有依賴包的影響（這個(gè)過(guò)程很費(fèi)時(shí)間，這個(gè)思路不是很好）。

排查到這就有點(diǎn)蛋疼了，Google搜了下看有沒(méi)有人和我遇到同樣的問(wèn)題，發(fā)現(xiàn)qq瀏覽器論壇上17年就有人提出這個(gè)問(wèn)題了，相似的帖子大概有七八個(gè)，但有官方回應(yīng)的也就一兩個(gè)，回復(fù)也只是說(shuō)讓升級(jí)瀏覽器。。。用戶升級(jí)瀏覽器還行，開(kāi)發(fā)者得解決問(wèn)題啊，排查到這已經(jīng)確定了一點(diǎn)，就是qq瀏覽器肯定對(duì)post請(qǐng)求的支持是有問(wèn)題的。

意識(shí)到qq瀏覽器有問(wèn)題，下意識(shí)想針對(duì)qq瀏覽器做下兼容處理。開(kāi)始想post改成get請(qǐng)求，但是post中的body不是簡(jiǎn)單地?cái)?shù)據(jù)結(jié)構(gòu)，如果是以下數(shù)據(jù)改成get還好，如：

body{name: 'frontend',age: '8',} 復(fù)制代碼

但是遇到較為復(fù)雜的數(shù)據(jù)結(jié)構(gòu)就不好使了，如：

{times: [123,234,2423,12],favour: {detail: 'sdadfa',}} 復(fù)制代碼

因?yàn)楦某蒰et后是通過(guò)query來(lái)傳遞數(shù)據(jù)的，query是只支持字符串的；另外這種方式隱隱約約感覺(jué)會(huì)坑很大，所以排除了這種方式。于是嘗試另一種方式，把body數(shù)據(jù)放到header里面，反正HTTP協(xié)議里對(duì)header大小是沒(méi)做限制的，所以這樣干的

const xhr = new XMLHttpRequest();xhr.setRequestHeader({x-body: JSON.stringify(body),}) 復(fù)制代碼

服務(wù)端接收時(shí)再判斷header中是否有x-body，當(dāng)時(shí)想的這種方式是可行的，但現(xiàn)實(shí)很殘酷，這種方式測(cè)試時(shí)發(fā)現(xiàn)抓包都抓不到，說(shuō)明請(qǐng)求都沒(méi)發(fā)出來(lái)，把body數(shù)據(jù)改小點(diǎn)，測(cè)試是可以的，這說(shuō)明qq瀏覽器對(duì)header里數(shù)據(jù)大小是有限制的，（這就是理論與現(xiàn)實(shí)的矛盾的問(wèn)題，http協(xié)議其實(shí)對(duì)這些都是沒(méi)有限制的，但各個(gè)瀏覽器會(huì)有各自不同的限制），這種方式也宣布流產(chǎn)，此時(shí)已經(jīng)中度蛋疼了。

后來(lái)想POST請(qǐng)求body為空這種問(wèn)題還是性質(zhì)挺嚴(yán)重的，其他頁(yè)面是不是有這種問(wèn)題呢？在別人頁(yè)面打開(kāi)找post請(qǐng)求發(fā)現(xiàn)人家的請(qǐng)求是有body的，這就說(shuō)明我們項(xiàng)目中是肯定有問(wèn)題的，但是同時(shí)有其他人反饋有過(guò)這種問(wèn)題，說(shuō)明qq瀏覽器也是有問(wèn)題的。

既然這邊不好debug到具體原因，那就向qq瀏覽器反饋下吧。先是向qq瀏覽器論壇提交了反饋，但是看之前帖子無(wú)人回應(yīng)，估計(jì)這次反饋也會(huì)遲遲得不到回應(yīng)；又找了QQ瀏覽器的反饋群，在群里反饋這個(gè)問(wèn)題，這個(gè)回應(yīng)還是比較快的，一天以后就有人回應(yīng)了，在提供了問(wèn)題頁(yè)面，復(fù)現(xiàn)版本后，qq瀏覽器那邊首先回應(yīng)是讓升級(jí)瀏覽器看好不好使，我是開(kāi)發(fā)者啊，保留現(xiàn)場(chǎng)還來(lái)不及呢怎么再去破壞現(xiàn)場(chǎng)，把這種敷衍懟回去后，他們認(rèn)真幫復(fù)現(xiàn)了下，最后確認(rèn)了問(wèn)題是舊版本的一個(gè)bug，最新的9.1.1上已經(jīng)解決了，事情到這總算有個(gè)眉目了，但是還沒(méi)算解決啊，他們回應(yīng)說(shuō)要么提醒用戶升級(jí)到最新瀏覽器，要么頁(yè)面請(qǐng)求時(shí)，服務(wù)器響應(yīng)一個(gè)content-type，我擦，我們的問(wèn)題終于出現(xiàn)了，這說(shuō)明我們頁(yè)面請(qǐng)求時(shí)沒(méi)有返回content-type啊，他們解釋說(shuō)頁(yè)面返回時(shí)沒(méi)有帶content-type，導(dǎo)致識(shí)別有問(wèn)題。我檢查了下果然沒(méi)有返回content-type，之前一直糾結(jié)在接口請(qǐng)求上了，卻忽視了頁(yè)面請(qǐng)求時(shí)的header內(nèi)容。

問(wèn)題找到了，也便容易解決了，在項(xiàng)目服務(wù)端渲染返回頁(yè)面時(shí)加上了content-type，順手向項(xiàng)目用的腳手架提了issue和pr。至此問(wèn)題終于算是解決了

總結(jié)

問(wèn)題就是qq瀏覽器中post請(qǐng)求時(shí)body為空，需要在頁(yè)面返回時(shí)有content-type，否則在一些版本的qq瀏覽器中會(huì)識(shí)別有問(wèn)題，導(dǎo)致body為空。

在這個(gè)過(guò)程中，我意識(shí)到兩個(gè)問(wèn)題

遇到問(wèn)題，特別是比較難解決的問(wèn)題，一定不要輕易放棄，深挖下去總能有些意想不到的東西，這就是經(jīng)驗(yàn)，而且解決了也會(huì)有成就感。

遇到不是很有思路的問(wèn)題，不要慌，不要輕易用打補(bǔ)丁做兼容的方式來(lái)解決問(wèn)題，比如post改get，且不說(shuō)語(yǔ)義不對(duì)，代碼不優(yōu)雅，后期也有可能帶來(lái)其他問(wèn)題。還是要找問(wèn)題的根源從而解決問(wèn)題。

總結(jié)

以上是生活随笔為你收集整理的bug修复录-qq浏览器中post请求时body为空的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。