共计 835 个字符,预计需要花费 3 分钟才能阅读完成。
在开发前台零碎的过程中,遇到了一个很奇怪的问题: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 应用阐明文档,发现它在浏览器兼容性方面存在一些有余,如图所示:
通过屡次调试,对 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