React项目设置字符集后API纯文本渲染乱码问题求助

你遇到的问题是直接渲染API返回的text/plain格式文本时出现问号乱码，已尝试以下操作但未解决：

• 使用Webpack的EncodingPlugin设置编码为ISO-8859-15
• 在index.html中定义字符集
• React的fetch请求里设置Content-Type: text/plain;charset=ISO-8859-15请求头
• 修改元素的font-family

当前返回文本显示为：

METEOROLOG�A

解决思路 #

1. 确认API返回的真实编码
   不要默认假设编码是ISO-8859-15，打开浏览器开发者工具，查看API响应头的Content-Type字段，确认服务器实际返回的编码（比如可能是ISO-8859-1、UTF-8或其他）。如果服务器未指定编码，可尝试常见编码逐一测试。

2. 手动处理字节解码（核心修复）
   fetch的res.text()默认按UTF-8解码，若服务器返回非UTF-8编码，必然出现乱码。改用res.arrayBuffer()获取原始字节，再用TextDecoder指定正确编码解码：

   fetch(`${url}`, {
     method: 'GET'
   })
   .then(res => res.arrayBuffer())
   .then(buffer => {
     // 替换为实际确认的编码，比如'ISO-8859-1'或'ISO-8859-15'
     const decoder = new TextDecoder('ISO-8859-15');
     const response = decoder.decode(buffer);
     setInfo(response);
     setLoading(false);
   });
   

   注意：请求头里的Content-Type是告知服务器你发送的内容类型，对服务器返回的编码无影响，建议直接删除该请求头，避免误导。

3. 统一页面字符集
   确保index.html中的<meta charset="UTF-8">设置正确，JS内部字符串以UTF-16存储，页面用UTF-8编码可兼容所有解码后的文本，无需额外调整为其他编码。

4. 移除冗余Webpack插件
   EncodingPlugin可能会干扰资源编码输出，既然已在代码中正确处理解码，可先移除该插件，避免双重编码导致的问题。

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