解析錯(cuò)誤
線上發(fā)版一個(gè)舊項(xiàng)目后發(fā)現(xiàn)在導(dǎo)入文件時(shí)，出現(xiàn)json解析錯(cuò)誤。
錯(cuò)誤信息
排查過程
當(dāng)前情況：
1、在我自己電腦上無法相同操作無法復(fù)現(xiàn)汞贸。
2、接口返回是完全正常的json，并不存在 < 號叹谁。
經(jīng)過排查發(fā)現(xiàn)此處發(fā)起請求的方式是通過form表單的target屬性去指定iframe，將action請求結(jié)果填充在iframe里乘盖，再去讀取iframe里的body焰檩。
(ps: 好古老的請求方式)
那么很明顯，解析到的<號明顯是html的標(biāo)簽混進(jìn)來了订框。debug后證實(shí)了我這個(gè)猜想析苫。
為什么我本地?zé)o法復(fù)現(xiàn)
版本問題
一開始其實(shí)懷疑過是不是因?yàn)樯壛?17版本，禁用了第三方cookie導(dǎo)致的穿扳。但是接口完全正常所以就沒有問題衩侥。通過對比不同瀏覽器時(shí)，發(fā)現(xiàn)在117版本矛物，相比其他版本和其他瀏覽器茫死，form表單提交后填充到iframe中會多一個(gè)div標(biāo)簽，同時(shí)填充的pre標(biāo)簽沒有了style履羞。
117版本生成
其他瀏覽器和其他版本
因此我本地依然是116版本的Chrome瀏覽器所以無法復(fù)現(xiàn)這個(gè)問題峦萎。升級了瀏覽器后成功復(fù)現(xiàn)，驗(yàn)證了這個(gè)說法忆首。
原理分析
首先不得不吐槽這種請求方式太奇葩了爱榔。但是作為前端工程師確實(shí)需要多關(guān)注主要瀏覽器升級的消息，否則也不會這么快的定位到是版本原因糙及。
另一個(gè)細(xì)節(jié)是：
接口返回(contentType: application/json):
返回的body會用標(biāo)簽包裹起來再放到iframe當(dāng)中(這也很正常详幽，因?yàn)閷τ跒g覽器你發(fā)送的是格式化的數(shù)據(jù))。
接口返回(contentType: text/html):
返回的body會直接放置在body標(biāo)簽中丁鹉。
接口返回text時(shí)填充的內(nèi)容
而這一次直接多出來了div標(biāo)簽則是妒潭，Chrome提供出來的美化你輸出的json的按鈕悴能。
117版本json美化
總結(jié)
- 首先不應(yīng)該使用這種請求的方式，有更適合的方式(ps: 這段代碼可能已經(jīng)非常久遠(yuǎn)了)
- 多關(guān)注瀏覽器和規(guī)范相關(guān)的更新內(nèi)容雳灾。
