url编码和base64编码

最新推荐文章于 2025-03-26 17:20:05 发布

白小水i

最新推荐文章于 2025-03-26 17:20:05 发布

阅读量1.1k

点赞数 9

文章标签： javascript

本文链接：https://blog.csdn.net/m0_62508027/article/details/146225763

版权

一、 URL编码

1. 什么是URL编码

URL 编码的主要目的是解决字符传输中的兼容性问题。在 Web 请求中，URL 是作为数据传递的载体，而 URL 中只能使用 ASCII 字符集（字母、数字、部分符号）。特殊字符（如空格、#、% 等）会影响 URL 的解析，因此需要一种编码机制，将所有不合法或特殊字符转换为兼容的 ASCII 字符。

2. URL编码的工作原理

URL 编码将不符合 URL 标准的字符转换成“%”开头的十六进制编码。例如，空格会编码成 %20，加号 + 会编码成 %2B

3.URL编码代码示例

url编码通常使用encodeURIComponent进行编码，decodeURIComponent进行解码
代码：

let origin = 'hello world!'
// 编码URL
let encoded = encodeURIComponent(origin)
// 解码
let decoded = decodeURIComponent(encoded)

console.log('原属字符（未编码）', origin);
console.log('URL编码后', encoded); // hello%20world!
console.log('URL解码后', decoded);

4. encodeURI和encodeURIComponent的区别

在编码 URL 时，encodeURI 和 encodeURIComponent 的作用不同。encodeURI 用于整体编码完整 URL，而 encodeURIComponent 用于编码单个查询参数。
代码：

let url = "https://example.com/search?q=Hello World&category=books";
console.log('encodeURL编码: ', encodeURI(url));                   //  https://example.com/search?q=Hello%20World&category=books
console.log('encodeURLComponent编码: ', encodeURIComponent(url)); //  https%3A%2F%2Fexample.com%2Fsearch%3Fq%3DHello%20World%26category%3Dbooks

编码整个url，通常使用encodeURI，保留url中合法的分隔符，同时可以避免url因特殊字符被错误解析。

5. url编码的实际应用

查询参数传递：在 GET 请求中，URL 编码用于将查询参数编码成合法的 URL 格式。
URL 重定向：当 URL 中包含动态内容或用户输入内容时，编码可以避免字符冲突。
跨站请求安全：通过将 URL 编码为安全字符集，防止恶意代码在 URL 中传播。

二、Base64编码

1. 什么是base64编码

Base64 编码是将任意二进制数据编码成 ASCII 字符的一种方式，通常用于传输图像、音频等非文本数据。其主要用途是将二进制数据转换成纯文本格式，便于在 URL、邮件正文等对二进制数据不友好的环境中传输。

2. base64工作原理

Base64 编码的核心在于将每三个字节的二进制数据分为四组，每组 6 位，用对应的 Base64 字符集（A-Z, a-z, 0-9, +, /）替换。末尾使用 = 作为填充字符（如果最后一组只有1个字符就需要3个等号填充），使得编码结果长度始终是 4 的倍数。

3. 代码示例

使用btoa编码，atob解码（刚开始我写的是js文件，使用node在终端运行报错 btoa not defined，是因为node不支持base64，换成html文件可以在浏览器控制台打开）
代码：

const text = "Hello, Base64 encoding!";
const base64Encoded = btoa(text); // Base64 编码
const base64Decoded = atob(base64Encoded); // Base64 解码
console.log("原始文本:", text);
console.log("Base64 编码后:", base64Encoded); //  SGVsbG8sIEJhc2U2NCBlbmNvZGluZyE=
console.log("Base64 解码后:", base64Decoded);

4. URL安全的Base64编码

使用base64编码后的+是url中的空格，/是url中的路径分隔符，因此可能导致解析错误
URL安全的base64编码：将+替换成-, /替换成_（下划线），去掉末尾的= （ + -> - , / -> _, 去掉 =）
代码：

const urlSafeBase64Encode = (str) => {   
	// 编码后将+ / 替换，并且使用''替换末尾的=以达到删除的效果 
    return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
};

const urlSafeBase64Decode = (str) => {
	// 解码之前需要先将字符恢复到替换之前，然后使用atob进行解码
    str = str.replace(/-/g, '+').replace(/_/g, '/');        
    return atob(str + '='.repeat((4 - str.length % 4) % 4));
};

const textForUrl = "http://example.com/path?name=John&age=18";
const encodedForUrl = urlSafeBase64Encode(textForUrl);
const decodedFromUrl = urlSafeBase64Decode(encodedForUrl);
console.log(btoa(textForUrl)); // aHR0cDovL2V4YW1wbGUuY29tL3BhdGg/bmFtZT1Kb2huJmFnZT0xOA==
console.log("URL 安全的 Base64 编码:", encodedForUrl); // aHR0cDovL2V4YW1wbGUuY29tL3BhdGg_bmFtZT1Kb2huJmFnZT0xOA
console.log("解码后:", decodedFromUrl); // http://example.com/path?name=John&age=18