做有态度的前端团队

网易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 网站的文档。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 服务器,清除缓存刷新浏览器,应该就可以看到正常的页面了。

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

分享到:

    已有 83 条评论

    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

    48. 1

      1

    49. 1

      1

    50. 1

      1

    51. 1

      1

    52. 1

      1

    53. 1

      1

    54. 1

      1

    55. 1

      1

    56. 1

      1

    57. 1

      1

    58. 1

      1

    59. 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