html - 拒绝应用样式，因为其 MIME 类型 "text/html"不支持样式表 MIME 类型，并且启用了严格的 MIME 检查

Question

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

我们时断时续地而不是始终如一地面对这个问题。此外，这种情况发生在少数用户而不是所有用户身上(我不知道这是否与地区有关)。发生此问题时，页面无法正确加载。在几次刷新尝试后，页面正确加载并且其他一切都按预期工作。

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

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

        <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 步)。在他们从应用程序服务器读取响应后，我怀疑他们的服务器无法维护文件 (.css/.js) 的相同内容类型。在我声明这一点之前，我想确认我的理解，但我没有工具来证明这一点，因为它只发生在生产中。我们在调试的开发环境中没有看到这个问题!!!

根据网站管理员的说法，问题出在应用程序的代码中。我在代码中看到的是 .jsp 文件中每个 .js/.css 文件的类型。我看到的是浏览器不接受网站管理员的响应。因为我们正在维护 rel="stylesheet"type="text/css"for CSS files 和 type="text/javascript"for all 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 的 server.xml 中添加了 mimetypes，如下供引用。

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

尽管如此，我们经常在浏览器中遇到 mime 类型不匹配的情况。网站管理员团队声称应用服务器必须发送错误的内容，没有任何合理的信息。

• 编辑 2:然后我测试了资源(js/css 文件)使用以下命令发送的 header 是什么。

  curl -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:当网站管理员建议过时的缓存可能会导致此类问题时，他们会禁用缓存。我另外编写了服务器端代码以确保缓存被禁用。以下是供引用的代码片段:

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 连接时，它会以文本/html 形式提供内容。在这个阶段，我不知道是不是这样。我正在寻找所有可能的领域来解决问题!!!

Answer 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

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

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