一个不兼容的 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 中相关逻辑的排查,定位到,最初的方法如下:

1
2
3
4
5
6
7
obj2String: (obj) => {
let arr = [], index = 0;
for (let key in obj) {
arr[index++] = [key, obj[key]];
}
return new URLSearchParams(arr).toString();
}

解决问题

通过查看 URLSearchParams 使用说明文档,发现它在浏览器兼容性方面存在一些不足,如图所示:


图:URLSearchParams 浏览器兼容性情况

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

1
2
3
4
5
6
7
8
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

相关文章

友情提示:请勿采取不友好的评论或进行过激的争吵,禁止任何淫秽、反动、暴力、赌博、恐吓或违法的内容。对此,本站将保留删除评论的权利。
0 条评论
😂暂无评论,快来抢沙发吧~