解决JS请求服务器gbk文件乱码的问题

当我们使用JavaScript从服务器请求文本数据时，可能会遇到文本编码不符合UTF-8（如GBK）的情况，导致在浏览器端显示出错了，我们需要对此进行处理。

1. 了解传统的字符编码方式

在 Web 开发初期，世界各地的计算机都有自己的字符编码规范，因此引起了字符编码混乱的情况。后来，Unicode 规范提出来，尝试解决全球字符集的问题，UTF-8 字符编码方式应运而生，它支持世界上绝大部分的字符集。

2. 了解GBK编码方式

GBK 是一种汉字编码方式，它是在 GB2312 （一个完整的汉字字符集编码方式）的基础上扩展增加的多位字符。由于 GBK 的编码方式不是UTF-8，它和我们常用的字符编码方式不太一样。如果前端使用 JS 进行请求 GBK 文件时，响应会出现乱码问题。

3. 安装 iconv-lite

iconv-lite 是一个在 Node.js 中实现了字符集转换功能的第三方模块。它能够帮助我们实现从 GBK 到 UTF-8（或其他支持的字符集）之间的转换，解决了 GBK 返回的乱码问题。可以使用 npm 命令行工具来安装：

npm install iconv-lite

4. 通过 iconv-lite 转换

我们需要使用 iconv-lite 将获取到的 GBK 格式的流转换成 UTF-8 格式。下面是一个实例，可以解决从 Node.js 服务端通过 http 请求 GBK 格式文本并转换为 UTF-8 格式返回给前端页面的方法：

const http = require('http');
const iconv = require('iconv-lite');

http.createServer((request, response) => {
  http.get('http://example.com/static/data.txt', res => {
    const chunks = []; // 存储数据 
    res.on('data', chunk => {
      chunks.push(chunk);
    });
    res.on('end', () => {
      // 合并数据并转换编码格式
      const buffer = Buffer.concat(chunks);
      const data = iconv.decode(buffer, 'gbk');
      // 返回数据时，按照 UTF-8 格式返回
      response.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8'});
      response.end(data);
    });
  });
}).listen(3000);

console.log('Server running at http://127.0.0.1:3000/');

如果我们使用 fetch 或 axios 等库进行请求，则可以使用第二个参数来指定返回的数据格式，将其转换为需要的数据格式，例如：

const axios = require('axios');
const iconv = require('iconv-lite');

axios.get('http://example.com/static/data.txt', { responseType: 'arraybuffer' })
  .then(res => {
    const buffer = Buffer.from(res.data, 'binary');
    const data = iconv.decode(buffer, 'gbk');
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

通过以上的转换处理，我们就可以解决从服务器请求 GBK 文件，在前端页面出现乱码的问题了。