Base64字符串从前台传到后台以后,“+”加号消失

news2025/1/19 11:34:03

记录一下问题:

使用 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,唯一区别就是编码的字符范围,其中

  1. encodeURI方法不会对下列字符编码:
    ASCII字母数字~!@#$&*()=:/,;?+'
  2. encodeURIComponent方法不会对下列字符编码:
    ASCII字母数字~!*()'

所以encodeURIComponentencodeURI编码的范围更大。
实际例子来说,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肯定要出问题,因为后面的/是需要编码的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/556376.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第一章.机器学习的基础概念

第一章.机器学习的基础概念 1.1 机器学习的基础概念 1.机器学的概念&#xff1a; 机器学习就是机器从数据中总结经验。从数据中找出某种规律或者模型&#xff0c;并用他来解决某种实际问题。 2.机器学习的应用场景 1).事物本身存在某种潜在规律 2).某些问题难以使用普通编程…

two-stage目标检测算法

R-CNN 现在&#xff0c;将目光穿越回2012年&#xff0c;hinton刚刚提出alexnet的时代。 此时&#xff0c;该如何审视目标检测任务&#xff1f; 当时的目标检测采用的是滑动窗口手动特征分类器的思路。 该方法的弱点包括 速度慢 精度差 精度差的问题是由手工特征造成的&am…

【VS安装记录】Visual Studio 2022安装教程(超详细)

大家好&#xff0c;我是雷工&#xff01; 由于更换了电脑&#xff0c;很多软件需要重新安装&#xff0c;为了方便学习C#&#xff0c;今天有时间安装下Visual Studio 2022&#xff0c;顺便记录安装过程。 1、从官网下载并解压软件压缩包&#xff0c;然后打开文件夹。 2、双击…

切比雪夫不等式,大数定律及极限定理。

一.切比雪夫不等式 1.定理 若随机变量X的期望EX和方差DX存在,则对任意ε > 0,有   P{ |X - EX| > ε } < DX/ε2 或 P{ |X - EX| < ε } > 1 - DX/ε2 2.解析定理 ①该定理对 X 服从什么分布不做要求&#xff0c;仅EX DX存在即可。 ②“| |” 由于X某次…

linux kernel pwn 基础知识

基础知识 内核概述 内核架构 通常来说我们可以把内核架构分为两种&#xff1a;宏内核和微内核&#xff0c;现在还有一种内核是混合了宏内核与微内核的特性&#xff0c;称为混合内核。 宏内核&#xff08;Monolithic kernel&#xff09;&#xff0c;也译为集成式内核、单体…

网络原理——基础概念(端口号、分层、封装和复用)、各层协议(TCP/IP协议)(详细图解)

目录 一、基础概念 1、 IP地址 &#xff08;1&#xff09;点分十进制 2、端口号 3、协议 &#xff08;1&#xff09;协议的 组成部分 &#xff08;2&#xff09; 协议的 作用 4、五元组 5、协议分层 &#xff08;1&#xff09;分层的 好处 &#xff08;2&#xff0…

Overleaf中Latex问题——控制文本分两列显示(分栏布局)

文章目录 需求描述相关介绍实现代码实现效果参考和总结 需求描述 要写论文&#xff0c;需要分两列进行显示文本。但是默认都是单列展示&#xff0c;并且自动换行。 需要实现一下的效果 相关介绍 在$LaTeX 中&#xff0c;你可以使用 中&#xff0c;你可以使用 中&#xff0c…

Tokenview上线BRC-20浏览器,支持Ordinals API数据服务

5月20日&#xff0c;Tokenview团队宣布正式推出BRC-20代币浏览器&#xff0c;同时支持BTC Ordinals API数据服务。作为通用多链区块链浏览器&#xff0c;Tokenview以最快的速度推出了BRC-20浏览器&#xff0c;Ordinals API旨在为所有面向比特币的普通用户和开发者提供数据支持&…

追寻篮球梦想 点燃希望之光 2023年海彼特全国幼儿篮球联赛·总决赛圆满落幕

5月21日&#xff0c;由北京海彼特教育科技院主办的“2023年海彼特全国幼儿篮球联赛总决赛”。在河北体育馆隆重举行&#xff0c;精彩的比赛效果使体育馆顿时成为幼儿篮球界最高端、大气的舞台。 本次盛会联合举办方有&#xff1a; 河北体育馆 亚洲少儿体育协会 北京海彼特文…

组件123456789

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…

G企孵化-千趣生活项目,10年互联网经验专业策划商业模式

G企孵化-千趣生活项目&#xff0c;10年互联网经验专业策划商业模式 背景&#xff1a;现在许许多多的项目&#xff0c;首先对外呼吁的口号就是“上市”但真正能做到上市的企业&#xff0c;确实没有几个&#xff0c;10年互联网经验的微三云胡佳东&#xff0c;给大家详细聊聊&…

【卡尔曼滤波的学习,以及一些理解】

卡尔曼滤波的一些理解 优秀的博客推荐直观理解卡尔曼滤波核心算法举个例子 最近两个多月在实习&#xff0c;做的是GPS定位相关的一些工作&#xff0c;同时也简单做了一下组合导航。卡尔曼滤波是组合不同传感器比较核心的算法&#xff0c;应用也比较广泛&#xff0c;也有很多文章…

电子数据保全及数据恢复

目录 一.创建虚拟磁盘 系统操作 1.创建虚拟磁盘文件 2.完成低级格式化——分区——高级格式化 3.虚拟磁盘创建完成 用winhex做 2. 镜像&#xff1a; 克隆&#xff1a; 计算分区的hash值&#xff1a; 二.FAT32文件系统 1.认识FAT32文件系统 三.NTFS文件系统 认识NTFS文…

数字信号处理5

好长时间没有更新了&#xff0c;一是这段时间事情比较多&#xff0c;另外一个&#xff0c;我觉得抄书其实意义不大&#xff0c;不如先看书&#xff0c;一个章节看完之后&#xff0c;再写&#xff0c;那样子的话&#xff0c;会效果更好一些&#xff0c;所以我就花了一段时间去把…

chatgpt赋能Python-python_chia

简介&#xff1a;什么是Python Chia&#xff1f; Python Chia是一种加密货币&#xff0c;它的挖矿过程使用Python编程语言。Python Chia是开源的&#xff0c;任何人都可以参与挖矿。 Chia使用绿色挖矿的方式&#xff0c;这意味着Chia的挖矿过程对环境没有任何负面影响。此外&…

typeScript开发

typeScript开发 1.TypeScript简介2.TypeScript 安装3.TypeScript 基础语法3.TypeScript 基础类型4.TypeScript 变量声明5.TypeScript 运算符6.TypeScript 条件语句7.TypeScript 循环8.TypeScript 函数9.TypeScript Number10.TypeScript String&#xff08;字符串&#xff09;11…

使用github CICD 简单部署vue项目

1.首先先创建一个github访问地址&#xff0c;关于Github Pages的域名访问地址&#xff0c;在github上新建一个以域名为名称的仓库即可&#xff0c;一般都是githubname.github.io 2.首先创建vue项目&#xff0c;这里我就使用自己写的前端项目脚手架来创建vue项目 这里顺便把图标…

立创梁山派学习笔记——GPIO输入检测

按键检测 前言按键的硬件电路BOOT选择复位按键唤醒按键GPIO输入框图软件配置寄存器简介1.端口控制寄存器&#xff08;GPIOx_CTL, xA..I&#xff09;2.端口上拉/下拉寄存器&#xff08;GPIOx_PUD, xA..I&#xff09;3.端口输入状态寄存器&#xff08;GPIOx_ISTAT, xA..I&#xf…

cs109-energy+哈佛大学能源探索项目 Part-2.2(Data Wrangling)

博主前期相关的博客见下&#xff1a; cs109-energy哈佛大学能源探索项目 Part-1&#xff08;项目背景&#xff09; cs109-energy哈佛大学能源探索项目 Part-2.1&#xff08;Data Wrangling&#xff09; 这次是将数据整理的部分讲完。 Data Wrangling 数据整理 Weather data 天…

chatgpt赋能Python-python_changeint

Python中changeint函数介绍&#xff1a;将浮点数转换为整数 Python是一种高级编程语言&#xff0c;众所周知&#xff0c;它非常强大且易于学习。在Python中&#xff0c;有一个很有用的函数&#xff0c;名为changeint&#xff0c;它可以将一个浮点数转换为整数。在本文中&#…