url 编码
2020-07-09 本文已影响0人
云上笔记
昨天在项目中发现了一个 bug，分享获客表单的二维码链接中没有带上分享人的 id,
请求二维码的链接格式如下：
pageUrl = "https://aaa.com/p.html?k=3090871a0f39dd75&shareid=100228";
genQrcodeUrl = "https://bbb.com/dist/gen_qrcode?size=5&margin=3&content=" ;
qrcodeImg = genQrcodeUrl + pageUrl;
// html
<img src="{{ qrcodeImg }}" alt="">
排查之后发现是因为获取二维码时 content参数的值应该为 pageUrl 整体，而pageUrl没有 url encode，那么后台在获取参数时 shareid 会被当做 genQrcodeUrl 的参数
知道原因了，查找资料发现有两种 js 内置的方法可以对 URI 进行编码
encodeURIComponent()
encodeURIComponent()是对统一资源标识符（URI）的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码（只有由两个Unicode代理区字符组成的字符才用四个转义字符编码)
encodeURIComponent(str) 接受一个参数str，str 为URI 的组成部分。
encodeURIComponent 可以对除了 A-Z a-z 0-9 - _ . ! ~ * ' ( ) 之外的所有字符进行编码
将代码修改为下面这样就可以了
pageUrl = "https://aaa.com/p.html?k=3090871a0f39dd75&shareid=100228";
genQrcodeUrl = "https://bbb.com/dist/gen_qrcode?size=5&margin=3&content=" ;
qrcodeImg = `${genQrcodeUrl}${encodeURIComponent(pageUrl)}`;
// html
<img src="{{ qrcodeImg }}" alt="">
encodeURI()
encodeURI() 函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列)由两个 "代理" 字符组成)
encodeURI(URIstring)接受一个参数URIstring，URIstring 为含有 URI 或其他要编码的文本
encodeURI 可以对除了以下字符之外的所有字符进行编码
| 类型 | 字符 |
|---|---|
| 保留字符 | ; , / ? : @ & = + $ |
| 非转义的字符 | 字母 数字 - _ . ! ~ * ' ( ) |
| 数字符号 | # |
我们的链接pageUrl中包含 ? & = 等 encodeURI不支持编码的字符，所以这个方法不能解决我们的问题。
总结
请求时 url 中的参数如果有特殊字符如中文 # ？等，记得用 encodeURIComponent编码处理
