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

时间:2018-06-12 08:58:05

标签: html apache http web mime-types

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

enter image description here enter image description here

我们间歇性地面对这个问题而不是始终如一。此外,这种情况发生在很少的用户而不是所有用户(我不知道这是否与地区有关)。发生此问题时,页面无法正确加载。在几次刷新尝试之后,页面正确加载,其他所有内容都按预期工作。

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

所有资源(.js& .css文件)的网址路径都是准确的。 在这些文件的原点设置的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>

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

enter image description here

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

根据网站管理员的说法,问题出在应用程序的代码中。我在代码中看到的是.jsp文件中每个.js / .css文件的类型。我看到的是浏览器不接受网站管理员的回复。我们正在维护 rel =&#34;样式表&#34;类型=&#34;文本/ CSS&#34;对于CSS文件 type =&#34; text / javascript&#34;对于所有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类型不匹配。网站管理员团队声称应用服务器必须发送错误的内容,而没有任何合理的信息。

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连接,则会将内容显示为text / html。在这个阶段,我不知道是否是这种情况。我正在寻找解决问题的所有可能领域!!!

2 个答案:

答案 0 :(得分:1)

客户端发起请求的请求(HTML / XML)通常几乎毫无意义,并且设置是另一个文件请求的模仿。 服务器的响应最终决定了mime类型的响应。通常有两种方法可以做到这一点。

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

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

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

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

通过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

对于导致间歇性问题的原因,我不确定,因为我编写自己代码的 all 的明确目的是避免出现此问题以及其他遇到的问题。当然,大多数人没有这种选择。因此,我可以建议寻找问题根源的最佳方案是确定是什么设置了文件的标头(例如,用作HTML的CSS文件)。如果您已经在这些文件中运行了服务器代码(例如PHP),则需要对其进行覆盖(例如,使用上述PHP)。理解标头必须在发送任何内容之前首先发送是至关重要的,否则,标头最多将看不见,并且更糟的是破坏了文件请求。我怀疑您遇到麻烦的文件中可能包含服务器端代码;如果不是设计上的 ,我建议通过FTP下载它们,并直接查看以确保实时服务器上的内容与开发计算机上的内容匹配(例如,这些文件是否遭到黑客入侵)。

此外,您发布的XML不会对服务器请求的任何内容产生影响(除非在某处声明这是Amazon服务器正式支持的内容)。

答案 1 :(得分:0)

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

我已经缩小了每个css和.js文件,并将它们内联添加到jsp文件中。

这解决了问题!