一个不兼容的 JS 方法，让你的网站发生崩溃

在开发前台系统的过程中，遇到了一个很奇怪的问题：PC 端的请求都很正常，移动端浏览器的请求却全部失败，后来发现这是因为请求参数发生了丢失现象。

本文将围绕 URL 查询字符串的序列化方法 URLSearchParams 展开内容，最终得出的结论是：在做兼容多端网站开发时，需要谨慎使用 URLSearchParams 方法。

问题呈现

采用的是前后端分离模式，需要在前端页面中对请求参数进行拼接，然后会向后端接口发出请求从而获取数据。

在 PC 端结果很正常，在移动端浏览器中尝试，发生了如下报错，导致网站在移动端发生功能的全面崩溃：

图：请求接口报错

分析问题

查看 Ngin 请求日志，发现很多下面的报错：

1	[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 使用说明文档，发现它在浏览器兼容性方面存在一些不足，如图所示：

图：URLSearchParams 浏览器兼容性情况

通过多次调试，对 URL 查询字符串的拼接进行了优化处理，最终的方法如下：

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

此时，PC 端和移动端浏览器中恢复正常，网站也兼容了多端的访问。