HTTP 請求中，空格應該被編碼為什么？今天我們走進 RFC 檔案和 W3C 檔案，了解一下這個「史詩級」大坑，
1.%20 還是 + ？
開始講解前先看個小測驗，在瀏覽器里輸入 blank test（ blank 和 test 間有個空格），我們看看瀏覽器如何處理的：
從動圖可以看出瀏覽器把空格決議為一個加號「+」，
是不是感覺有些奇怪？我們再做個測驗，用瀏覽器提供的幾個函式試一下：
encodeURIComponent("blank test") // "blank%20test"
encodeURI("q=blank test") // "q=blank%20test"
new URLSearchParams("q=blank test").toString() // "q=blank+test"
代碼是不會說謊的，其實上面的結果都是正確的，encode 結果不一樣，是因為 URI 規范和 W3C 規范沖突了，才會搞出這種讓人疑惑的烏龍事件，
2.沖突的協議
我們首先看看 URI 中的保留字，這些保留字不參與編碼，保留字符一共有兩大類：
gen-delims： :/?#[]@sub-delims： !$&'()*+,;=
URI 的編碼規則也很簡單，先把非限定范圍的字符轉為 16 進制，然后前面加百分號，
空格這種不安全字符轉為十六進制就是 0x20，前面再加上百分號 % 就是 %20：
所以這時候再看 encodeURIComponent 和 encodeURI 的編碼結果，就是完全正確的，
既然空格轉為%20 是正確的，那轉為 + 是怎么回事？這時候我們就要了解一下 HTML form 表單的歷史，
早期的網頁沒有 AJAX 的時候，提交資料都是通過 HTML 的 form 表單，form 表單的提交方法可以用 GET 也可以用 POST，大家可以在 MDN form 詞條上測驗：
經過測驗我們可以看出表單提交的內容中，空格都是轉為加號的，這種編碼型別就是 application/x-www-form-urlencoded，在 WHATWG 規范里是這樣定義的：
到這里基本上就破案了，URLSearchParams 做 encode 的時候，就按這個規范來的，我找到了 URLSearchParams 的 Polyfill 代碼，里面就做了 %20 到 + 的映射：
replace = {
'!': '%21',
"'": '%27',
'(': '%28',
')': '%29',
'~': '%7E',
'%20': '+', // <= 就是這個
'%00': '\x00'
}
規范里對這個編碼型別還有解釋說明：
The
application/x-www-form-urlencodedformat is in many ways an aberrant monstrosity, the result of many years of implementation accidents and compromises leading to a set of requirements necessary for interoperability, but in no way representing good design practices. In particular, readers are cautioned to pay close attention to the twisted details involving repeated (and in some cases nested) conversions between character encodings and byte sequences. Unfortunately the format is in widespread use due to the prevalence of HTML forms.
這種編碼方式就不是個好的設計，不幸的是隨著 HTML form 表單的普及，這種格式已經推廣開了
其實上面一大段句話就是一個意思：這玩意兒設計的就是 ??，但積重難返，大家還是忍一下吧
3.一句話總結
URI 規范里，空格 encode 為
%20，application/x-www-form-urlencoded格式里，空格 encode 為+實際業務開發時，最好使用業內成熟的 HTTP 請求庫封裝請求，這些雜活兒累活兒框架都干了；
如果非要使用原生 AJAX 提交
application/x-www-form-urlencoded格式的資料，不要手動拼接引數，要用URLSearchParams處理資料，這樣可以避免各種惡心的編碼沖突，
4.文章推薦
本文選自我的長文HTTP 規范中的那些暗坑，想要了解更多可點擊原文查看，
更多推薦：
webpack 中最易混淆的 5 個知識點，掘金快 800 贊了 webpack dll 是個什么東西，看完就能擺脫繁瑣的 dll 配置 React Native 性能優化指南從渲染層的角度分析了 RN 性能優化的 6 個點，并以圖文形式講解了 FlatList 的實作原理 Web Scraper——輕量資料爬取利器 介紹了一個小巧的瀏覽器爬蟲插件，可以實作簡單的資料爬取功能
最后推薦一下我的個人公眾號：「鹵蛋實驗室」，平時會分享一些前端技術和資料分析的內容，大家感興趣的話可以關注一波：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31402.html
標籤：Html/Css