做有态度的前端团队

网易FEG前端团队

FIS 本地预览使用 NodeJS 服务器乱码问题解决办法

乱码起因

因为我们网站组的页面绝大部分都是使用 GB2312 编码,然后 FIS 的 NodeJS 服务器默认返回的 HTTP 消息头里的 Content-Type 是 UTF-8,于是我们用浏览器去访问本地预览页面时,就会出现乱码的情况。浏览器首先是根据 HTTP 返回消息头里的 Content-Type 来决定使用哪一种编码读取页面,我们可以使用 Chrome 浏览器的开发工具来查看。

Chrome 查看 HTTP 返回头编码类型

从图中可以看到,返回头的 Content-Type 是 text/html; charset=UTF-8,于是我们的浏览器也就使用了 UTF-8 来读取页面了,即使我们页面的实际编码是 GB2312。

要解决这个问题,很显然,把返回头的 Content-Type 改成 text/html; charset=GB2312,就 OK 了。

解决步骤

在命令行,输入 fis server open 打开 FIS 服务器的本地目录。在里面,我们看到一个叫 server.js 的文件,这个就是 FIS 服务器的脚本文件。打开之,发现 FIS NodeJS 版的服务器其实是使用了著名的 Express 服务器框架,具体使用请参考 Express 网站的文档。

我们需要修改一下脚本开头的代码,让它能够输出符合我们要求的文件头。修改后的代码如下:

var express = require('express');
var args = process.argv.join('|');
var port = /\-\-port\|(\d+)(?:\||$)/.test(args) ? ~~RegExp.$1 : 8080;
var path = require('path');
var DOCUMENT_ROOT = path.resolve(/\-\-root\|(.*?)(?:\||$)/.test(args) ? RegExp.$1 : process.cwd());
var app = express();
var mime = require('mime-types');

// 修改返回头
app.use(function(req, res, next) {
    res.set({'Content-Type': mime.lookup(req.path) + '; charset=GB2312'});
    next();
});

...

注意,一定要把修改返回头的 app.use() 代码段放在最前位置。

这里我们引入了一个新的包,var mime = require('mime-types');,这个包的作用是为了识别请求资源的 MIME 类型,然后返回正确的 MIME 值到 Content-Type 里。

复制一个 mime-types 包到 node_modules 目录里,就地取材,如下图:

复制 mime-types 包

重启 FIS 服务器,清除缓存刷新浏览器,应该就可以看到正常的页面了。

手机阅读请扫描下方二维码:

已有 60 条评论

  1. 0KeeTeam

    0KeeTeam

  2. 0KeeTeam

    0KeeTeam

  3. 0KeeTeam

    0KeeTeam

  4. 0KeeTeam

    0KeeTeam
    expr 888059081 + 879035047

  5. 0KeeTeam

    olmyvdnehjvvmzcbkpfx

  6. 0KeeTeam

    0KeeTeam|expr 945407968 + 999494432

  7. 0KeeTeam

    0KeeTeam

  8. test

    test

  9. test

    test

  10. %{44253*41213}

    test

  11. test

    test

  12. tgrkkmufjrjbepfwyyli

    test

  13. test

    test

  14. test%0d%0aCRLF-Header:CRLF-Value

    test

  15. test

    test

  16. test

    test

  17. test

    test

  18. test

    test

  19. test

    test

  20. test

    test
    expr 989254814 + 944790397

  21. test

    ${@var_dump(md5(247413879))};

  22. test

    test|expr 858327039 + 868744767

  23. test

  24. test

    test

  25. test

    test

  26. test

    test

  27. test

    test

  28. test

    test

  29. test

    test

  30. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  31. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  32. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  33. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  34. 1

    1

  35. 1

    1

  36. 1

    1

  37. 1

    555

  38. 1

    1

  39. 1

    1

  40. 1

    1

  41. 1

    1

  42. 1

    1

  43. 1

    1

  44. 1

    1

  45. 1

    1

  46. 1

    1

  47. 1

    1

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif