编码问题 UTF-8 & GBK-CSDN博客

记一次奇怪的编码问题。

Meta Element vs Response Header
Meta 的作用？
一个细节
细节对编码的影响

Meta Element vs Response Header

一个 GBK 编码页面，使用 meta 指定页面编码和使用 response header 指定页面编码。哪个优先级比较高？

Case 1

Header 为 utf-8
Meta 为 gbk

$  curl -i  http://127.0.0.1:3000/utf-1
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html;charset=utf-8
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Sat, 08 Sep 2018 03:53:26 GMT
ETag: W/"129-165b7502163"
Content-Length: 297
Date: Sat, 08 Sep 2018 03:54:25 GMT
Connection: keep-alive

<html>
<meta charset="gbk">
<p>
中文（使用 encodeURIComponent ）：
<script>
  document.write(encodeURIComponent('中文'));
</script>
</p>
<p>页面跳转（使用 a 标签）：
<a href='/?p=中文'>
<script>
  document.write(document.querySelector('a').href);
</script>
</a>
</p>
</html>

Case 2

Header 为 gbk
Meta 为 utf-8

$ curl -i  http://127.0.0.1:3000/utf-2
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html;charset=gbk
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Sat, 08 Sep 2018 03:53:44 GMT
ETag: W/"12b-165b750666a"
Content-Length: 299
Date: Sat, 08 Sep 2018 03:54:31 GMT
Connection: keep-alive

<html>
<meta charset="utf-8">
<p>
中文（使用 encodeURIComponent ）：
<script>
  document.write(encodeURIComponent('中文'));
</script>
</p>
<p>页面跳转（使用 a 标签）：
<a href='/?p=中文'>
<script>
  document.write(document.querySelector('a').href);
</script>
</a>
</p>
</html>

结论

Response Header 编码优先级高于 meta 信息

Meta 的作用？

既然 response header 优先级比较高，那要使 meta 生效，需要先设置 content-type 为空，然后再用 meta 指定编码，验证一下

不设置 header，指定 meta 编码为 utf-8

注意 response header 中没有 content-type 了
由于 shell 编码是采用 utf-8 的，所有在终端中会显示乱码
能看清 meta 信息即可

$ curl -i http://127.0.0.1:3000/gbk-1
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: null
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Sat, 08 Sep 2018 04:05:23 GMT
ETag: W/"115-165b75b105c"
Content-Length: 277
Date: Sat, 08 Sep 2018 04:06:51 GMT
Connection: keep-alive

<html>
<meta charset="utf-8">
<p>
</p>
</html>

浏览器效果：

不设置 header，指定 meta 编码为 gbk

$ curl -i http://127.0.0.1:3000/gbk-2
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: null
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Sat, 08 Sep 2018 04:05:27 GMT
ETag: W/"113-165b75b22f9"
Content-Length: 275
Date: Sat, 08 Sep 2018 04:07:03 GMT
Connection: keep-alive

<html>
<meta charset="gbk">
<p>
</p>
</html>

效果

结论

在未指定 content-type header 的情况下，可以使用 meta 标签指定页面编码

一个细节

我们把能正常编码的页面放一起看

utf-1 页面

gbk-2 页面

现象

我们发现，不管是 GBK 页面还是 UTF 页面，使用 encodeURIComponent('中文') 后的编码都为 %E4%B8%AD%E6%96%87 。也就是说无论页面编码，encodeURIComponent 都使用 UTF 进行编码。

但使用 a 标签，将中文字符放在 HTML 代码中，或在 js 中直接使用 location.href = '/?p=中文' 进行跳转，该编码格式会与页面编码有关。如上图中，UTF 页面会将中文编码成 %E4%B8%AD%E6%96%87, GBK 页面会将中文编码成 %D6%D0%CE%C4，这里面坑就比较大了。

编码细节的影响

Nodejs

在 nodejs 中，使用 express 框架，分别请求 http://127.0.0.1:3000/?p=%D6%D0%CE%C4 和 http://127.0.0.1:3000/?p=%E4%B8%AD%E6%96%87 ，使用 req.query.xxx 获取 url 参数时，会分别返回 %D6%D0%CE%C4 和 中文，这点也比较好，默认会使用 utf-8 解码，不行的返回原编码。

使用 GBK to UTF 的编码解决即可。

Java Servlet

不像 Nodejs，Java 编码不正确设置，会乱码

@WebServlet("/GBK")
public class GBK extends HttpServlet {

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置为 GBK 编码
        request.setCharacterEncoding("GBK");

        String name =request.getParameter("name");

        response.setContentType("text/html; charset=utf-8");
        response.getWriter().append("Hello " + name);
    }
}

~ curl -i http://localhost:8080/servlet/GBK\?name\=%D6%D0%CE%C4
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=utf-8
Content-Length: 12
Date: Sat, 08 Sep 2018 06:47:52 GMT

Hello 中文%

️ 其中需要注意的是，URL 中由于是 GBK 编码，实际处理过程中：

processParameters(MessageBytes data, java.lang.String encoding) 中的 encoding ，是
org.apache.catalina.connector.Request:parseParameters 方法设置的，相关代码如下：

// 从 connector 中拿到配置项
boolean useBodyEncodingForURI = connector.getUseBodyEncodingForURI();
if (enc != null) {
    parameters.setEncoding(enc);
    // 配置了 bodyencodingforuri 才对 uri 进行制定编码 decode
    if (useBodyEncodingForURI) {
        parameters.setQueryStringEncoding(enc);
    }
} else {
    parameters.setEncoding
        (org.apache.coyote.Constants.DEFAULT_CHARACTER_ENCODING);
    if (useBodyEncodingForURI) {
        parameters.setQueryStringEncoding
            (org.apache.coyote.Constants.DEFAULT_CHARACTER_ENCODING);
    }
}
// 处理 query 参数
parameters.handleQueryParameters();