关于将URL中的特殊字符进行转码和解码

叁歲伎倆 2023-07-12 14:26 21阅读 0赞

当前开发中,遇到特殊情况: 使用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 后端的解决: ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>方法</td> 
   <td>解释</td> 
  </tr> 
  <tr> 
   <td>URLEncoder.encode(String s, String enc)&nbsp;</td> 
   <td> <p>编码</p> <p>s - 要转换的 String。<br> enc - 所支持的字符编码名称。</p> </td> 
  </tr> 
  <tr> 
   <td>URLEncoder.decode(String s, String enc)&nbsp;</td> 
   <td> <p>解码</p> <p>s - 要转换的 String。<br> enc - 所支持的字符编码名称。</p> </td> 
  </tr> 
 </tbody> 
</table>

对 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%23

### 2. js 前端的解决 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>方法</td> 
   <td>解释</td> 
  </tr> 
  <tr> 
   <td>encodeURIComponent(str);</td> 
   <td> <p>编码</p> <p>str- 要转换的 String。</p> </td> 
  </tr> 
  <tr> 
   <td>decodeURIComponent(str);</td> 
   <td> <p>解码</p> <p>str - 要转换的 String。</p> </td> 
  </tr> 
 </tbody> 
</table>

例如:

var password = decodeURIComponent("1Qazwsx%23");
    console.log(password);
    
    //显示结果  1Qazwsx#

其他的变法解码方式:

**示例（摘自**W3School）：

**1 escape()**

输出结果：

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()**

输出结果：

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的跳转。