.js 文件中的特殊字符最初未正确显示

Question

我通过 IntelliJ Idea 在 Tomcat 服务器上部署了一个 .war 文件。
我注意到一个字符“ä”没有正确显示，而在其他地方相同的字符显示正确。我发现只有我在 .js 文件中硬编码的特殊字符受到影响。
我尝试在 IntelliJ 中将所有 .js 文件设置为 UTF-8，我还将所有标准编码设置更改为 UTF-8，但错误并没有消失。
我所有的 js 文件都使用 webpack 映射到一个 index.js 文件中，但是我不知道具体如何，因为这是一个最初由其他人设置的项目。

我最近做了一个有趣的新观察： 当我第一次打开浏览器（用 Firefox 和 Chrome 测试）时，它显示不正确：

在定期重新加载 (F5) 时没有任何变化，但是当使用 CTRL + F5 重新加载时，它突然正确：
这真的让我很困惑......有人知道这里可能发生了什么吗？
我的 Java 文件曾经遇到过同样的问题，但是在更改了我的 gradle 构建文件中的编码之后才有效。
最终我的问题是：
您认为我应该更改哪些内容才能始终正确显示特殊字符？

Answer 1

我在 Windows 服务器上更新 tomcat 后添加了一个类似的问题：浏览器端的 javascripts 内容损坏的字符。 http 标头是正确的，因此我进行了进一步调查。

在服务器上，javascript 文件以 utf-8 格式保存，没有 BOM。

使用 Wireshark，我看到字符“é”（UTF-8 编码文件中的 C3-A9）被传输为 (C3-83-C2-A9)。这意味着 Tomcat 正在读取一个 ANSI 文件并轻轻地将其转换为 UTF8！

所以我只是将 BOM 添加到保存的文件中，它修复了错误。 （REM：用notepad++很容易添加BOM）。

但我不想更新所有服务器文件，我希望 tomcat 能够正确读取 UTF-8。

简单的解决方法是在 tomcat web.xml 中定义文件编码，如下所示：

<servlet>
    <servlet-name>default</servlet-name>
    <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
    <init-param>
        <param-name>debug</param-name>
        <param-value>0</param-value>
    </init-param>
    <init-param>
        <param-name>listings</param-name>
        <param-value>false</param-value>
    </init-param>
    <!------------------- add the settings here ------------->
    <init-param>    
        <param-name>fileEncoding</param-name>
        <param-value>utf-8</param-value>
    </init-param> 
    <!------------------- end of the added settings ------------->
    <load-on-startup>1</load-on-startup>
</servlet>

Answer 2

这真的让我很困惑......有人知道这里可能发生了什么吗？

缓存。 Ctrl+F5 告诉浏览器重新加载资源，即使它已缓存。 F5 将重用缓存中的资源，如果它在缓存中。

您认为我应该如何更改才能始终正确显示特殊字符？

鉴于上面的 F5/Ctrl+F5 操作，您可能已经完成了。

基本上，确保：

1. 文件（.js、.html 等）以正确的编码存储，使用该编码查看时，可以正确显示字符。强烈建议对每种类型的文件使用相同的编码，尽管理论上可以对 JavaScript 文件使用 UTF-8，对 HTML 文件使用（比如）Windows-1252。但这只是要求复杂性和麻烦。

2. 确保管道中的每一步都正确识别用于文件的编码。这意味着（例如）Tomcat 需要为您的 .js 文件包含标头 Content-Type: application/javascript; charset=utf-8 或类似名称。 （text/javascript; charset=utf-8 也可以使用，但已过时。）不过，对于 HTML 文件，the W3C recommends 包括 meta 标头和省略来自Content-Type 的charset。

1234563链接如上面的项目符号） 用于执行此操作，例如在本地保存文件并打开它（因此没有 HTTP 标头），让人类和机器阅读器清楚，等等。