当前开发中,遇到特殊情况: 使用url进行跨页面(跨域)传值的时候,会出现某些带特殊字符的url,在浏览器上被处理了,例如:
后端传给前端的跳转路径:
http://127.0.0.1:8088/harbor/sign-in?userName=admin&userPassword=1Qaz2wsx#浏览器跳转时浏览器地址栏的url变成:
http://127.0.0.1:8088/harbor/sign-in?userName=admin&userPassword=1Qaz2wsx注意:末尾处的#不见了
还有其他情况,如url中的参数有 "/" "&" "@" "&" 特殊字符时,url都会出现错误…
解决方案: 使用URL的编码和解码 对 特殊字符进行处理
1. java 后端的解决:
| 方法 | 解释 |
| URLEncoder.encode(String s, String enc) |
编码 s – 要转换的 String。 |
| URLEncoder.decode(String s, String enc) |
解码 s – 要转换的 String。 |
对 String 编码时，使用以下规则：
- 字母数字字符 "
a" 到 "z"、"A" 到 "Z" 和 "0" 到 "9" 保持不变。 - 特殊字符 "
."、"-"、"*" 和 "_" 保持不变。 - 空格字符 "
+"。 - 所有其他字符都是不安全的，因此首先使用一些编码机制将它们转换为一个或多个字节。然后每个字节用一个包含 3 个字符的字符串 "
%xy" 表示，其中 xy 为该字节的两位十六进制表示形式。推荐的编码机制是 UTF-8。但是，出于兼容性考虑，如果未指定一种编码，则使用相应平台的默认编码。
例如，使用 UTF-8 编码机制，字符串 "The string ü@foo-bar" 将转换为 "The+string+%C3%BC%40foo-bar"，因为在 UTF-8 中，字符 ü 编码为两个字节，C3 （十六进制）和 BC （十六进制），字符 @ 编码为一个字节 40 （十六进制）。
//String str = "1Qaz2wsx#";try {String encode = URLEncoder.encode(str, "utf-8");//编码System.out.println(encode);String decode = URLDecoder.decode(encode, "utf-8");//解码System.out.println(decode);} catch (UnsupportedEncodingException e) {e.printStackTrace();}//显示:
1Qaz2wsx%23
1Qaz2wsx#后端特殊处理后,传给前端的url变为:
http://127.0.0.1:8088/harbor/sign-in?userName=admin&userPassword=1Qaz2wsx%232. js 前端的解决
| 方法 | 解释 |
| encodeURIComponent(str); |
编码 str- 要转换的 String。 |
| decodeURIComponent(str); |
解码 str – 要转换的 String。 |
例如:
var password = decodeURIComponent("1Qazwsx%23");
console.log(password);//显示结果 1Qazwsx#其他的变法解码方式:
示例（摘自W3School）：
1 escape()
<script type="text/javascript">
document.write(escape("Visit W3School!") + "<br />")
document.write(escape("?!=()#%&"))
</script>输出结果：
Visit%20W3School%21
%3F%21%3D%28%29%23%25%26
2 encodeURI()
<html>
<body>
<script type="text/javascript">
document.write(encodeURI("http://www.w3school.com.cn")+ "<br />")
document.write(encodeURI("http://www.w3school.com.cn/My first/")+ "<br />")
document.write(encodeURI(",/?:@&=+$#"))
</script>
</body>
</html>输出结果：
http://www.w3school.com.cn
http://www.w3school.com.cn/My%20first/
,/?:@&=+$#
对整个URL进行编码，而URL的特定标识符不会被转码。
3 encodeURIComponent()
<script type="text/javascript">
document.write(encodeURIComponent("http://www.w3school.com.cn"))
document.write("<br />")
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"))
document.write("<br />")
document.write(encodeURIComponent(",/?:@&=+$#"))
</script>输出结果：
http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23
对URL中的参数进行编码，因为参数也是一个URL，如果不编码会影响整个URL的跳转。