请求CSS样式表返回乱码，响应头为UTF-8，该如何排查解决？

我尝试通过GET请求获取一个CSS样式表，但响应内容全部乱码。这是编码错误吗？响应头显示编码为UTF-8。代码如下：

var https = require('https'); 
var fs = require('fs'); 
var url ='https://d14pr3cu5atb0x.cloudfront.net/pkg/css/chimera-e6f0150f64.css'; 
var request = https.request(url, function (res) { 
  var data = ''; 
  res.on('data', function (chunk) { 
    data += chunk; 
  }); 
  res.on('end', function () { 
    console.log(data); 
  }); 
}); 
request.on('error', function ...

解决方案：处理gzip压缩的响应 #

嘿，我碰到过好多次这种情况！你的问题根本不是UTF-8编码的锅，大概率是这个CSS文件通过CloudFront CDN传输时被自动做了gzip压缩——虽然响应头标了Content-Type: text/css; charset=utf-8，但同时应该还有个Content-Encoding: gzip的头，你直接把压缩后的二进制数据拼字符串，自然会得到乱码。

另外注意，你原代码还漏了调用request.end()，这会导致请求一直挂着发不出去，这个也得补上。

修改后的代码如下，用Node.js的zlib模块处理解压：

var https = require('https');
var fs = require('fs');
var zlib = require('zlib'); // 引入zlib处理压缩流

var url = 'https://d14pr3cu5atb0x.cloudfront.net/pkg/css/chimera-e6f0150f64.css';

var request = https.request(url, function (res) {
  // 根据响应头的压缩类型选择对应的解压流
  var decompressStream;
  if (res.headers['content-encoding'] === 'gzip') {
    decompressStream = zlib.createGunzip();
  } else if (res.headers['content-encoding'] === 'deflate') {
    decompressStream = zlib.createInflate();
  } else {
    // 没有压缩的话直接用原响应流
    decompressStream = res;
  }

  var data = '';
  decompressStream.on('data', function (chunk) {
    data += chunk;
  });

  decompressStream.on('end', function () {
    console.log(data); // 现在应该能看到正常的CSS内容了
  });
});

request.on('error', function (err) {
  console.error('请求出错:', err);
});

request.end(); // 必须调用end来发送请求

你可以先在回调里打印console.log(res.headers)，确认一下是否存在content-encoding字段，这样就能100%确定是不是压缩导致的问题啦～

内容的提问来源于stack exchange，提问作者miriamsimone