【JS】一个不兼容的 JS 方法,让你的网站发生崩溃
一个不兼容的 JS 方法,让你的网站发生崩溃
user_IXCvaJjM发布于 今天 03:47
在开发前台系统的过程中,遇到了一个很奇怪的问题: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
javascript程序员restful
https://www.yulisay.com/d/kobpr.html
阅读 39更新于 今天 03:47
user_IXCvaJjM
https://www.yulisay.com
1 声望
0 粉丝
user_IXCvaJjM
https://www.yulisay.com
1 声望
0 粉丝
宣传栏
在开发前台系统的过程中,遇到了一个很奇怪的问题: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
以上是 【JS】一个不兼容的 JS 方法,让你的网站发生崩溃 的全部内容, 来源链接: utcz.com/a/105243.html
得票时间