3
一个不兼容的 JS 方法，让你的网站发生崩溃
source link: https://www.yulisay.com/d/kobpr.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
2021-01-21 于立 Web笔记 52 0 356 Words 1 Mins
在开发前台系统的过程中，遇到了一个很奇怪的问题：PC 端的请求都很正常，移动端浏览器的请求却全部失败，后来发现这是因为请求参数发生了丢失现象。
本文将围绕 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 查询字符串。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK