IE浏览器中URL包含汉字导致URL乱码

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/03/31/IE%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%ADURL%E5%8C%85%E5%90%AB%E6%B1%89%E5%AD%97%E5%AF%BC%E8%87%B4URL%E4%B9%B1%E7%A0%81/

摘要

本文主要讲述了：

复现
原因
解决方案

正文

复现

示例：

<!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>
  <body>
    <a href="index.html?username=中文">中文</a>
  </body>
</html>

<!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>
  <body>
    <script>
      window.addEventListener('click', function () {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'index.html?username=中文');
        xhr.send();
      });
    </script>
  </body>
</html>

原因

在<a>的href特性中，如果 URL 的查询字符串中包含汉字，IE 浏览器直接传输汉字的UTF-8编码，其他浏览器会隐式调用encodeURIComponent()
在 Ajax 的GET请求中，如果 URL 的查询字符串中包含汉字，IE 浏览器直接传输汉字的gbk编码，其他浏览器会隐式调用encodeURIComponent()

解决方案

手动编码

示例：

<!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>
  <body>
    <a href="index.html?username=%E4%B8%AD%E6%96%87">中文</a>
  </body>
</html>

<!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>
  <body>
    <script>
      window.addEventListener('click', function () {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'index.html?username=%E4%B8%AD%E6%96%87');
        xhr.send();
      });
    </script>
  </body>
</html>