记录一下问题:
使用 encodeURI(str) 对字符串进行加密的时候,后端解密会丢失+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function encodeBase64(str){
// 对字符串进行编码
// var encode = encodeURIComponent(str);
var encode = encodeURI(str);
// 对编码的字符串转化base64
var base64 = btoa(encode);
console.log(base64);
}
</script>
<body>
<input type="button" name="" id="" onclick="encodeBase64('111测试风吹是+===')">点击
</body>
</html>
public class testMM {
public static void main(String[] args) throws UnsupportedEncodingException {
Base64 base64 = new Base64();
String baseContent = new String(base64.decode("MTExJUU2JUI1JThCJUU4JUFGJTk1JUU5JUEzJThFJUU1JTkwJUI5JUU2JTk4JUFGKz09PQ=="), "UTF-8");
String content = URLDecoder.decode(baseContent, "utf-8");
System.out.println(content);
}
}
解决方案:前端js使用 encodeURIComponent(str);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function encodeBase64(str){
// 对字符串进行编码
var encode = encodeURIComponent(str);
//var encode = encodeURI(str);
// 对编码的字符串转化base64
var base64 = btoa(encode);
console.log(base64);
}
</script>
<body>
<input type="button" name="" id="" onclick="encodeBase64('111测试风吹是+===')">点击
</body>
</html>
base64依赖包
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function encodeBase64(str){
// 对字符串进行编码
var encode = encodeURIComponent(str);
console.log("encodeURIComponent 的encode-----"+encode);
//var encode = encodeURI(str);
// 对编码的字符串转化base64
var base64 = btoa(encode);
console.log("encodeURIComponent的encode的base64-----"+base64);
var encode2 = encodeURI(str);
console.log("encodeURI 的encode-----"+encode2);
//var encode = encodeURI(str);
// 对编码的字符串转化base64
var base642 = btoa(encode2);
console.log("encodeURI 的encode的base64-----"+base642);
}
</script>
<body>
<input type="button" name="" id="" onclick="encodeBase64('111测试风吹是+===')">点击
</body>
</html>
encodeURIComponent 的encode-----111%E6%B5%8B%E8%AF%95%E9%A3%8E%E5%90%B9%E6%98%AF%2B%3D%3D%3D
encodeURIComponent的encode的base64-----MTExJUU2JUI1JThCJUU4JUFGJTk1JUU5JUEzJThFJUU1JTkwJUI5JUU2JTk4JUFGJTJCJTNEJTNEJTNE
encodeURI 的encode-----111%E6%B5%8B%E8%AF%95%E9%A3%8E%E5%90%B9%E6%98%AF+===
encodeURI 的encode的base64-----MTExJUU2JUI1JThCJUU4JUFGJTk1JUU5JUEzJThFJUU1JTkwJUI5JUU2JTk4JUFGKz09PQ==
encodeURI 区别于 encodeURIComponent
对URL编码是常见的事,所以这两个方法应该是实际中要特别注意的。
它们都是编码URL,唯一区别就是编码的字符范围,其中
encodeURI
方法不会对下列字符编码:ASCII字母
、数字
、~!@#$&*()=:/,;?+'
encodeURIComponent
方法不会对下列字符编码:ASCII字母
、数字
、~!*()'
所以
encodeURIComponent
比encodeURI
编码的范围更大。
实际例子来说,encodeURIComponent
会把http://
编码成http%3A%2F%2F
而encodeURI
却不会。二者应用场景
如果你需要编码整个URL,然后需要使用这个URL,那么用encodeURI;比如:
encodeURI("http://www.cnblogs.com/season-huang/some other thing");
编码后会变为:"http://www.cnblogs.com/season-huang/some%20other%20thing";
其中,空格被编码成了%20。但是如果你用了encodeURIComponent,那么结果变为:"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"
看到了区别吗,连 "/" 都被编码了,整个URL已经没法用了。
当你需要编码URL中的参数的时候,那么encodeURIComponent是最好方法。var param = "http://www.cnblogs.com/season-huang/"; //param为参数 param = encodeURIComponent(param); var url = "http://www.cnblogs.com?next=" + param; console.log(url) //"http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"看到了把,参数中的 "/" 可以编码,如果用encodeURI肯定要出问题,因为后面的/是需要编码的。