如果一个 restful 接口的涉及为:

请求路径:10.200.xxx.xxx/custom-interfaces/file/

请求类型为:GET

请求参数为:path,模拟请求值为:/测试{} 。

发起的请求路径应该是:

http://10.200.xxx.xxx/custom-interfaces/file/?path=/测试{}

浏览器实际向后台发起的请求为:

image.png

响应为 400,问题在于:{},因为有特殊符号所以报错了。

解决方法:

1、在 拼接 请求URL 之前 可以先将 path参数 的参数值通过 encodeURIComponent 处理一下。例如:

var params = { token:xxx };
for(item in params){
    params[item] = encodeURIComponent(params[item]);
}

2、或用 RegExp 去替代

var reg = new RegExp(/\%/,"g");
var reg1 = new RegExp(/\&/,"g");
var params = { token:xxx };
for(item in params){
    params[item] = String(params[item]).repalce(reg,"%25").replace(reg1,"%25");
}

image.png


特殊字符分类

  1. 用于分隔 URI 组件的标点符号:;/?:@&=+$,#
  2. 其他ASCII 标点符号进行编码: - \_ . ! ~ \* ' ( )

encodeURIencodeURIComponent的区别:

encodeURIComponent:传递参数时需要使用encodeURIComponent,这样组合的url才不会被#等特殊字符截断。另外,encodeURIComponent只会对用于分隔 URI 组件的标点符号进行处理。不会对其他标点符号进行编码。

encodeURI:进行url跳转时可以整体使用encodeURI。
encodeURI():不会对用于分隔 URI 组件的标点符号进行编码,例如冒号、正斜杠、问号和井字号;
encodeURI():在实践中更常见的是对查询字符串参数而不是对基础URL进行编码.


兼容性比较强的替代版本:

for(var item in params){
    var nowData = params[item];
    try{ 
       params[item] = encodeURIComponent(decodeURIComponent(nowData)) 
    }catch(err){
        var reg = new RegExp(/\%/,"g");
        params[item] = encodeURIComponent(decodeURIComponent(nowData.replace(reg,"%25")))
    }
}
  • 浏览器在对%执行decodeURIComponent时报错

鸭梨
2.3k 声望734 粉丝

« 上一篇
vue面试题总结