【JS】一个不兼容的 JS 方法,让你的网站发生崩溃

一个不兼容的 JS 方法,让你的网站发生崩溃

user_IXCvaJjM发布于 今天 03:47

在开发前台系统的过程中,遇到了一个很奇怪的问题:PC 端的请求都很正常,移动端浏览器的请求却全部失败,后来发现这是因为请求参数发生了丢失现象。


本文将围绕 URL 查询字符串的序列化方法 URLSearchParams 展开内容,最终得出的结论是:在做兼容多端网站开发时,需要谨慎使用 URLSearchParams 方法。

问题呈现

采用的是前后端分离模式,需要在前端页面中对请求参数进行拼接,然后会向后端接口发出请求从而获取数据。

在 PC 端结果很正常,在移动端浏览器中尝试,发生了如下报错,导致网站在移动端发生功能的全面崩溃:

【JS】一个不兼容的 JS 方法,让你的网站发生崩溃

分析问题

查看 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 使用说明文档,发现它在浏览器兼容性方面存在一些不足,如图所示:

【JS】一个不兼容的 JS 方法,让你的网站发生崩溃

通过多次调试,对 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

avatar

user_IXCvaJjM

https://www.yulisay.com

1 声望

0 粉丝

0 条评论

得票时间

avatar

user_IXCvaJjM

https://www.yulisay.com

1 声望

0 粉丝

宣传栏

在开发前台系统的过程中,遇到了一个很奇怪的问题:PC 端的请求都很正常,移动端浏览器的请求却全部失败,后来发现这是因为请求参数发生了丢失现象。


本文将围绕 URL 查询字符串的序列化方法 URLSearchParams 展开内容,最终得出的结论是:在做兼容多端网站开发时,需要谨慎使用 URLSearchParams 方法。

问题呈现

采用的是前后端分离模式,需要在前端页面中对请求参数进行拼接,然后会向后端接口发出请求从而获取数据。

在 PC 端结果很正常,在移动端浏览器中尝试,发生了如下报错,导致网站在移动端发生功能的全面崩溃:

【JS】一个不兼容的 JS 方法,让你的网站发生崩溃

分析问题

查看 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 使用说明文档,发现它在浏览器兼容性方面存在一些不足,如图所示:

【JS】一个不兼容的 JS 方法,让你的网站发生崩溃

通过多次调试,对 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

回到顶部