做有态度的前端团队

网易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 服务器,清除缓存刷新浏览器,应该就可以看到正常的页面了。

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

添加新评论

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