背景

URLSearchParmas API 为 URL 的查询字符串（query string）提供了方便操作的接口，管理端的项目大多都应用了该接口，但这个 API 因为部分浏览器没有实现（如 IE 和旧版 Edge，详见），所以引入了相应的 polyfill（github.com/WebReflection/url-search-params ）进行支持，npm 包名为 url-search-params。

URLSearchParams 的使用方式使用详见这里。

存在问题

随着2018年4月 windows 10 系统的更新发布，Edge 浏览器的排版引擎升级到了17，开始支持 URLSearchParams API。但是由于存在一些 bug，而且引入的 polyfill 也没有发现并进行处理，所以导致管理端的项目在 Edge 浏览器上请求时，在一定条件下会出现参数错误，最后导致请求失败。

如何复现

当请求参数中，但参数值同时出现“&”符号和“ ”空格时，URLSearchParams 的 toString() 方法就会出问题。

举个例子，下面是一个参数 q ，值为 a & b ，预期“ ”转为“+”，“&”转为"%26" ：

const params = new URLSearchParams({q: 'a & b'});
params.toString();
// 期望返回“q=a+%26+b”，Edge 17浏览器则返回了“q=a+&+b”

从上面结果可以看出，Edge 17没有成功转义“&”符，由于这个字符是用于分割参数的，这样原本只有一个参数 q='a & b' ，但是由于没有成功转义”&“，就变成 q='a ' 和 ' b'='' （注意 b 前面有一个空格）两个参数了，改变了原本的请求参数。

如何解决

解决方法

Plan A

原有 polyfill 的 GitHub 代码内没有对一些实现不规范的 URLSearchParams API 进行替换处理，解决改问题需要在模块引入前先清掉浏览器的 API（ window.URLSearchParams 设为 undefined ），模块引入时就会赋予一个代码实现的 API。

原本打算在沿用旧有的 polyfill 上，不改变旧的 npm 包，应用上述方法进行修复。但是要在引用 polyfill 之前插入一段代码判断，会增加了代码耦合，所以放弃了。还有一种是直接在原有的 polyfill 代码上改，但由于该项目用 make 命令进行构建，对此不太熟悉，并且作者已将该项目转移到新的项目进行维护，构建方式也改了，最后就放弃了。

Plan B

原有 polyfill 由于已经转移到新的 Github 项目进行维护（github.com/ungap/url-search-params），构建也改为 npm 进行构建，npm 包名改为 @ungap/url-search-params，前面加了个 scope。

在新的 polyfill 项目代码中，作者这次有对不规范的 URLSearchParams API 进行判断和替换，这样恰好也能在此添加 Edge 浏览器的判断。

于是就可以 fork 该项目代码修改和测试，然后给该项目提了个 pull request 给作者，很快作者就合并了代码，并发布了新的 npm 包。

然后，先把原来的 npm 包卸载，然后替换上新的 npm 包。

# 卸载
npm uninstall --save url-search-params
# 安装
npm install --save @ungap/url-search-params

最后，把模块引入的代码改下。

import URLSearchParams from 'url-search-params';
// 改为
import URLSearchParams from '@ungap/url-search-params';

最后

最近，微软官方宣布 Edge 浏览器将放弃 EdgeHTML 内核，将采用 Chromium 内核，前端开发纷纷期待新 Edge 到来。不过时间应该还长，而且用户升级也要时间，所以大家还是赶紧修复。

Edge 浏览器 URLSearchParams bug 修复相关推荐

edge浏览器如何把网页放到桌面_edge浏览器怎么把网页放桌面 - 卡饭网
win10 Edge浏览器怎么收藏网页到收藏夹并显示出来 win10 Edge浏览器怎么收藏网页到收藏夹并显示出来 win10 Edge浏览器怎么收藏网页到收藏夹并显示出来?自从安装了Win10正式版 ...
java在浏览器闪退_Edge浏览器闪退怎么办，Edge浏览器闪退如何修复
Win10系统自带的Edge浏览器有用户反映存在闪退问题,Edge浏览器的体验和流畅度方面还算不错,但对于很多Edge浏览器用户闪退问题是一个烦恼,那么Edge浏览器闪退怎么解决呢?这里小编提供一些方 ...
Edge浏览器默认主页被莫名修改，修复流程分享
目录查看默认主页设置默认主页修复查看默认主页设置打开浏览器,默认主页面为百度搜索打开Egde浏览器的设置,查看开始.主页和新建标签页按照设置每次打开Edge浏览器出现的应该是Edge自带的 ...
Microsoft Edge浏览器下载文件乱码修复方法(二)
之前有写过"Microsoft Edge浏览器下载文件乱码修复方法",发现很多情况下下载文件乱码问题还是存在,这里对之前内容做简单补充,希望可以帮到大家. 方法二: 默认如果提示下 ...
Win10怎么样修复edge浏览器？如何重置edge浏览器
在Windows10系统桌面右键点击左下角的开始按钮,在弹出的菜单中点击设置菜单项. Win10怎么样修复edge浏览器?如何重置edge浏览器[多图] 在打开的Windows设置窗口中,点击应用图标 ...
【网络修复-微软账号】windows系统微软账号无法登录、edge浏览器微软账号登录不了
一.问题背景 windows系统微软账号无法登录.edge浏览器微软账号登录不了. 因为出BUG的时候我没有截图,所以这里就不放出问题图片了,大家都懂. 就是在右边橙色圈圈点击登录时,转一会就出错. ...
修复Edge浏览器无法登录微软账户问题
问题描述之前重装系统后默认的Edge浏览器需要重新登录微软账号,在账户密码正确的情况下,笔者无论登录多少次都无法登录成功.每次都会卡在请稍等的页面,如下图所示原因查阅网上的方案,大抵推测是登录无 ...
引起 Edge 浏览器远程代码漏洞的幕后黑手已出现！
此前微软的 Edge 浏览器被曝光存在一个严重的漏洞,可使得黑客通过该漏洞获取用户的电脑权限,进而掌控系统.漏洞的编号被标记为 CVE-2018-8629,微软也在漏洞曝光不久后发布了紧急修复补丁. ...
Windows11更新后打不开Edge浏览器解决办法
前几天吐槽win11更新版本后打不开Microsoft Edge浏览器了,特别影响我使用,然后找网上方法,大多让去设置里修复,就这样,然而没什么卵用,这应该是win11新版本的bug了. 后来看到b ...

Edge 浏览器 URLSearchParams bug 修复

背景