Java UTF-8 Base64编码含äöü字符，前端atob解码是否需特殊处理？

场景说明 #

从message*.properties文件读取包含ä、ö、ü的字符，通过以下Java代码编码后发送给Angular客户端：

String encodedString = Base64.getEncoder().encodeToString(str.getBytes(StandardCharsets.UTF_8));

客户端使用atob方法解码：

const decodedString = atob(encodedString)

问题解答 #

1. 该解码方式是否可行？ #

不可行。Java端是将字符串按UTF-8编码为字节数组后做Base64编码，但atob会把Base64解码后的字节直接映射为Latin-1（ISO-8859-1）字符。像ä、ö、ü这类UTF-8多字节字符，会被拆分为多个Latin-1字符，最终出现乱码。

比如：ä的UTF-8字节是0xC3 0xA4，Base64编码后为w6E，用atob解码会得到ä，而非正确的ä。

2. 客户端是否需要对atob进行特殊处理？ #

需要，必须补充字符集转换步骤，才能正确还原UTF-8字符。推荐的处理代码如下：

function decodeUtf8Base64(encoded) {
  // 先用atob解码为Latin-1二进制字符串
  const binaryStr = atob(encoded);
  // 将二进制字符串转换为Uint8Array
  const byteArray = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    byteArray[i] = binaryStr.charCodeAt(i);
  }
  // 用UTF-8解码器还原为正确字符串
  return new TextDecoder('utf-8').decode(byteArray);
}

// 调用示例
const decodedString = decodeUtf8Base64(encodedString);

或者更简洁的写法（环境支持ES6+的情况下）：

const decodedString = new TextDecoder('utf-8').decode(
  Uint8Array.from(atob(encodedString), c => c.charCodeAt(0))
);

3. atob方法是否有默认字符集？ #

atob的默认字符集是Latin-1（ISO-8859-1）。它的工作逻辑是把Base64解码后的每个字节直接对应到Latin-1编码表中的字符，不会自动进行其他字符集的转换，这也是直接使用atob处理UTF-8字符会乱码的核心原因。

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