在开发前台系统的过程中,遇到了一个很奇怪的问题: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 使用说明文档,发现它在浏览器兼容性方面存在一些不足,如图所示:

图: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