拒绝应用样式，因为它的 MIME 类型“text/html”不支持样式表 MIME 类型，并且启用了严格的 MIME 检查答案

【问题标题】：Refused to apply style because its MIME type "text/html" is not supported stylesheet MIME type, and strict MIME checking is enabled拒绝应用样式，因为它的 MIME 类型“text/html”不支持样式表 MIME 类型，并且启用了严格的 MIME 检查
【发布时间】：2018-11-21 14:43:06
【问题描述】：

我们有一个与 xyz 网站管理员一起部署在生产环境中的网站。以下是在两个不同实例中发生错误时 Web 控制台的两个屏幕截图。

我们间歇性地而不是始终地面临这个问题。此外，这发生在少数用户而不是所有用户身上（我不知道这是否与地区有关）。发生此问题时，页面无法正确加载。几次刷新尝试后，页面正常加载，其他一切都按预期工作。

众所周知，网站管理员启用了严格的 MIME 类型检查。

所有资源（.js 和 .css 文件）的 URL 路径都是准确的。这些文件的原始 MIME 类型设置是正确的。下面是引用这些文件的.jsp页面的代码sn-p。

        <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/jquery/jquery-ui.css" type="text/css" />

    <script src="${pageContext.request.contextPath}/static/js/jquery/jquery.min.js" type="text/javascript" ></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap/bootstrap.min.js" type="text/javascript"></script>   
    <script src="${pageContext.request.contextPath}/static/js/jquery/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery/jquery.dataTables.min.js" type="text/javascript"> </script>

根据我的理解，请求流程就像这个小图一样。

我怀疑问题是由网站管理员服务器在将响应发送回客户端浏览器时引起的（第 4 步）。在他们从 App 服务器读取响应后，我怀疑他们的服务器无法维护文件 (.css/.js) 的相同内容类型。在我声明这一点之前，我想确认我的理解，但我缺乏证明这一点的工具，因为它只在生产中发生。我们在我们的开发环境中没有看到这个问题要调试！！！

根据网站管理员的说法，问题出在应用程序的代码中。我在我们的代码中可以看到 .jsp 文件中每个 .js / .css 文件的类型。我看到的是浏览器不接受网站管理员的响应。由于我们为 CSS 文件维护 rel="stylesheet" type="text/css" 和为所有 javascript 维护 type="text/javascript"文件，我在应用服务器中看不到问题！！

提前感谢您的建议。

编辑 1： 在 web.xml 中添加 mimetypes，如下：

<mime-mapping>    
    <extension>js</extension>        
    <mime-type>application/javascript</mime-type>        
</mime-mapping>
<mime-mapping>    
    <extension>css</extension>        
    <mime-type>text/css</mime-type>        
</mime-mapping>

在 liberty 服务器的 server.xml 中添加了 mimetypes，如下供参考。

<mimeTypes>
    <type>js=application/javascript</type>
    <type>css=text/css</type>
</mimeTypes>

尽管如此，我们经常在浏览器中得到 mime 类型不匹配。站长团队声称应用服务器一定是发送了错误的内容，没有任何合理的信息。

编辑 2： 然后我用下面的命令测试了资源（js/css文件）发送的头文件是什么。

卷曲 -I https://myapplication/static/js/angular/angular.min.js 以下是我得到的回复。当我运行循环 100 次时，它始终返回相同的响应。

HTTP/1.1 200 OK 
X-Backside-Transport: OK OK  
Content-Language: en-US
Content-Length: 168517
**Content-Type: application/javascript**  
Date: Tue, 19 Jun 2018 10:38:25 GMT 
Last-Modified: Tue, 29 May 2018 17:04:10 GMT 
X-Powered-By: Servlet/3.1 
X-Global-Transaction-ID: 1178221711
Connection: close

所以，我在应用服务器端看不到任何问题。

- 编辑 3： 当网站管理员建议陈旧的缓存可能会产生此类问题时，缓存会从他们这边禁用。我还编写了服务器端代码以确保禁用缓存。下面是代码sn-p供参考：

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setHeader("Expires", "0"); // Proxies.

要确保资源是从服务器而不是从缓存中加载的，请查看开发人员工具中的网络选项卡。如果资源指示 200 状态码，则从服务器加载成功。如果状态码为304，则从缓存中加载。

- 编辑 4： 我不知道网站管理员如何建立 ssl 连接。当 SSL 连接未正确建立时，它会以 text/html 形式提供内容。在这个阶段，我不知道是不是这样。我正在寻找所有可能的领域来解决这个问题！！！

【问题讨论】：

“由于我们为 CSS 文件维护 rel="stylesheet" type="text/css" 为所有 javascript 文件维护 type="text/javascript"，我没有看到应用程序服务器中的问题” - Akamai 应该以某种方式关心那些 HTML 属性？我非常怀疑这一点。您在浏览器控制台中看到的错误消息指的是与这些资源一起交付的 Content-Type 响应标头 - 很可能 Akamai 只是传递您的服务器在这方面提供的内容。
这些 javascript/css 文件只是在我们的 .jsp 页面中引用。我们为这些文件“不添加任何响应标头”。当我直接在浏览器中加载文件的 URL 时，它会正确加载。检查这是否是问题的另一种方法是什么？如果问题出在我们的代码中，我很好，我很乐意解决它。但我们需要确定这一点。一个问题：如果问题出在应用程序代码上，那么所有用户都应该遇到这个问题，但事实并非如此。除了“类型”，在我们的应用程序中在哪里寻找这个？
添加适当的响应标头通常由 Web 服务器自动完成。您能否直接检查您的服务器如何响应，而不需要 Akamai 干预？
如果没有 Akamai，它可以正常工作。我们没有看到任何问题！！我们有一个没有 Akamai 的实例用于初始滚降，并且没有这个问题。
投反对票的人，能否请您说明原因，以便我更正！

标签： html apache http web mime-types

【解决方案1】：

发起请求的客户端请求 (HTML/XML) 通常几乎没有意义，对于设置另一个文件请求的 mime 来说毫无希望。 服务器的响应最终决定了 mime 类型的响应是什么。通常有两种方法可以做到这一点。

在大多数情况下，对于 Apache HTTP 服务器，所有具有相同扩展名的文件都具有相同的 mime 类型，因此在示例中所有 *.js 文件都将具有 application/javascript mime 类型。

通过 Apache .htaccess 文件设置 mime 类型：

AddType text/css .css
AddType application/javascript .js

有时人们使用 Apache 重写或其他高级方法，有时没有任何文件扩展名。 MIME 类型可以单独添加到文件中。

通过 PHP 设置 mime 类型：

header('Content-Type: text/css; charset=UTF-8');//Use only in .css files.
header('Content-Type: application/javascript; charset=UTF-8');//Use only in .js files.

如果出于某种原因您需要在 .css 文件中运行 PHP，您可以在 .htaccess 文件中使用它，然后使用上面的代码确保文件的标题告诉浏览器正确的 mime 类型是什么.

AddType application/x-httpd-php5 .css .html

至于导致间歇性问题的原因我不确定，因为我编写自己的代码所有的明确目的是避免您遇到的这个问题和其他问题。当然大多数人没有这个选择。因此，在寻找导致问题的原因时，我可以推荐的最佳情况是确定是什么设置了文件的标题（例如作为 HTML 提供的 CSS 文件）。如果您已经在这些文件中运行了诸如 PHP 之类的服务器代码，那么您需要覆盖它（例如，使用上面的 PHP）。在发送任何内容之前，必须首先发送标头，这一点至关重要，否则，标头最多将看不见，更糟糕的是会破坏文件请求。我怀疑您遇到问题的文件中可能包含服务器端代码；如果按设计不是，我建议通过 FTP 下载它们并直接查看以确保您的实时服务器上的内容与您的开发机器上的内容相匹配（例如，这些文件是否被黑客入侵）。

此外，您发布的 XML 对服务器请求的任何内容都没有影响（除非在某处声明为亚马逊服务器正式支持的内容）。

【讨论】：

我正在按照您的建议设置 mime 类型。您引用了 apache 的 .htaccess 文件，在我的情况下，它是 Liberty 服务器中的 server.xml 文件。是的，IBM Liberty 服务器正式支持它。当我测试文件是否返回正确的内容类型时，我总是得到正确的（用于测试标题的命令：curl -I myapplication/static/js/angular/angular.min.js）。他们没有任何服务器端代码。它们是普通的 css/js 文件。
@Gana 如果有任何类型的请求，在 mime 类型不正确的情况下是否一致？某些类型的浏览器、旧版本、奇怪的 URL 请求、引荐来源网址等？要修复由错误引起的不一致，您需要找出导致错误的一致性。此外，我不熟悉 IBM 的 Liberty 服务器，但请确保 server.xml 确实 not 具有 BOM（字节顺序标记）。我建议使用 Notepad++ 编辑文件并确保编码为 UTF-8 without BOM。检查那个！ BOM 的存在会严重影响文件。
谢谢约翰，我确实处理好了！
@Gana 对于相同的 URL 请求产生不同的结果是不是标准，除非您明确编程它；在这种情况下显然不是。所以最大的问题是：你能自己产生错误吗？如果是这样，调试应该比其他场景容易得多。如果您认为缓存已禁用，请验证它是否已禁用。例如。浏览器中的开发者工具？您需要分析您所做的工作以验证高水平的信心。你要么没有考虑是什么导致了问题，要么你错过了一些东西。尝试 Winmerge 比较标头请求。
@Gana 是的，我在日志中看到了错误。我正在清理它，并将尝试重建私人消息。当我完成时，我会在那里和这里回复。我非常善于发现错误。 :-)

【解决方案2】：

我发现摆脱这个问题的唯一方法是在 jsp 文件中内嵌样式和脚本文件。

我已经缩小了每个 css 和 .js 文件，并将它们内嵌在 jsp 文件中。

这解决了问题！

【讨论】：