一個不相容的 JS 方法，讓你的網站發生崩潰

在開發前臺系統的過程中，遇到了一個很奇怪的問題：PC 端的請求都很正常，移動端瀏覽器的請求卻全部失敗，後來發現這是因為請求引數發生了丟失現象。

本文來源：魚立說。本文連結：https://www.yulisay.com/d/kobpr.html，支援微信瀏覽器開啟。

更多精彩文章，請移步 魚立說個人網站 翻看。歡迎欣賞，吐槽不足之處。

---

本文將圍繞 URL 查詢字串的序列化方法 URLSearchParams 展開內容，最終得出的結論是：在做相容多端網站開發時，需要謹慎使用 URLSearchParams 方法。

問題呈現

採用的是前後端分離模式，需要在前端頁面中對請求引數進行拼接，然後會向後端介面發出請求從而獲取資料。

在 PC 端結果很正常，在移動端瀏覽器中嘗試，發生瞭如下報錯，導致網站在移動端發生功能的全面崩潰：

分析問題

檢視 Ngin 請求日誌，發現很多下面的報錯：

[19/Jan/2021:11:44:58 +0800] "GET /api/method?a%2C123= HTTP/2.0" 403 ……

經過對 JS 中相關邏輯的排查，定位到，最初的方法如下：

obj2String: (obj) => {
    let arr = [], index = 0;
    for (let key in obj) {
        arr[index++] = [key, obj[key]];
    }
    return new URLSearchParams(arr).toString();
}

解決問題

通過檢視 URLSearchParams 使用說明文件，發現它在瀏覽器相容性方面存在一些不足，如圖所示：

通過多次除錯，對 URL 查詢字串的拼接進行了優化處理，最終的方法如下：

obj2String: (obj) => {
    let str = '';
    for (let key in obj) {
        if(str != '') str += '&';
        str += key + "=" + obj[key];
    }
    return str;
}

此時，PC 端和移動端瀏覽器中恢復正常，網站也相容了多端的訪問。

擴充知識

querystring（查詢字串）：NodeJS 自帶模組，用於解析和格式化 URL 查詢字串。

參考連結

① URLSearchParams() - Web API 介面參考 | MDN

② URL | Node.js v15.6.0 Documentation