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

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

enter image description here enter image description here

我们面临着这个问题,它是间歇性的,不是一直存在。此外,这只发生在少数用户身上,而不是所有用户(我不知道这是否与地区有关)。当出现这个问题时,页面无法正确加载。经过几次刷新尝试后,页面会正确加载,其他所有功能都按预期工作。
众所周知,网站管理员启用了严格的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>

根据我的理解,请求流程如下所示的小图表。

enter image description here

我怀疑问题是由网站管理员服务器在将响应发送回客户端浏览器时引起的(步骤4)。在他们从应用程序服务器读取响应后,我怀疑他们的服务器未能维护文件的相同Content-Type(.css / .js)。在我确认我的理解之前,我想证明这一点,但由于这只发生在生产中,因此我缺乏工具来证明这一点。我们在开发环境中看不到此问题以进行调试!!!
根据网站管理员的说法,问题在应用程序代码中。我们代码中每个.jsp文件中的每个.js / .css文件的类型。我看到的是浏览器不接受来自网站管理员的响应。因为我们维护CSS文件的rel =“stylesheet”type =“text / css”和所有JavaScript文件的type =“text / javascript”,所以我在应用程序服务器中没有看到这个问题!!
提前感谢您的建议。
  • Edit 1: Added mimetypes in web.xml, as below:

    <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>
    
在自由服务器的server.xml中添加了mimetypes,如下所示供参考。
<mimeTypes>
    <type>js=application/javascript</type>
    <type>css=text/css</type>
</mimeTypes>

尽管如此,我们经常在浏览器中遇到MIME类型不匹配的情况。网站管理员团队声称应用服务器必须发送错误的内容,没有任何合理的信息。
编辑2: 然后我使用以下命令测试资源(js / css文件)发送的头文件。 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连接未正确建立时,会将内容以text/html形式呈现。目前,我不知道是否存在这种情况。我正在寻找解决问题的所有可能领域!

1
由于我们在CSS文件中维护rel="stylesheet" type="text/css",在所有javascript文件中维护type="text/javascript",因此我不认为应用服务器存在问题。而Akamai是否会关注这些HTML属性?我非常怀疑。浏览器控制台中看到的错误消息是指这些资源所传递的Content-Type响应头 - 很可能Akamai只是传递了您的服务器在这方面提供的内容。 - CBroe
这些JavaScript / CSS文件只是在我们的.jsp页面中引用。我们没有为这些文件添加任何响应头。当我直接在浏览器中加载文件的URL时,它可以正常加载。有什么其他方法可以检查是否存在问题?如果问题出现在我们的代码中,我很乐意修复它。但是我们需要确定一下。一个问题:如果问题出现在应用程序代码中,那么所有用户都应该遇到该问题,但事实并非如此。除了“类型”之外,在我们的应用程序中还要查找什么? - Gana
添加适当的响应头通常是由Web服务器自动完成的。您能够直接检查服务器的响应,而不需要Akamai的干预吗? - CBroe
没有使用 Akamai,它完美地运行。我们没有看到任何问题!我们有一个没有使用 Akamai 的实例用于初始卷出,它没有这个问题。 - Gana
请问给我投反对票的人,能否具体说明原因,这样我才能进行改正! - Gana
@CBroe:我为文件添加了 MIME 类型,以便正确传递响应头(如果它们没有)。然而,我仍然看到这个问题。你有其他想法吗?我已经编辑了我的问题并添加了额外的信息。谢谢。 - Gana
2个回答

2
客户端请求(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

关于导致间歇性问题的原因,我不确定,因为我编写了所有代码,旨在避免您遇到的这些和其他问题。当然,大多数人没有这个选择。所以,我建议您在寻找导致问题的原因时,最好的情况是确定设置文件头的内容(例如将CSS文件作为HTML提供)。如果您已经在这些文件中运行了服务器代码,例如PHP,则需要覆盖它(例如使用上面的PHP代码)。必须理解的关键是,在发送任何内容之前,必须首先发送标头,否则最好情况下标头将不会被看到,最坏情况下会破坏文件请求。我怀疑您遇到问题的文件可能包含服务器端代码;如果这不是设计原因,建议您通过FTP下载这些文件,并直接查看以确保您的实时服务器上的内容与开发机器上的内容匹配(例如这些文件是否被黑客攻击)。
此外,您发布的XML对于从服务器请求的任何内容都没有影响(除非Amazon的服务器正式支持此功能)。

@Gana 如果任何类型的请求在 MIME 类型不正确时保持一致,怎么办?某些类型的浏览器、旧版本、奇怪的 URL 请求、引荐人等等?为了修复由错误引起的不一致性,您需要找到什么一致性会导致错误。此外,我不熟悉 IBM 的 Liberty 服务器,但请确保 server.xml 没有 BOM(字节顺序标记)。我建议使用 Notepad++ 编辑文件,并确保编码为 UTF-8 without BOM。检查一下!BOM 的存在可能会严重干扰文件。 - John
谢谢约翰,我已经处理好了! - Gana
@Gana 好的,请告诉我问题是否仍然存在,或者您是否发现其他原因导致任何问题。 我认为最终测试始终应该与见证人一起进行,例如朋友,因为由于某种原因,事情在他们面前会破裂,而对我来说不会破裂,因此,如果您正在处理“害羞”的错误,请尝试让朋友见证页面请求或要求在他们的计算机上加载页面。 - John
1
@Gana,除非你明确地编程设置了不同的 URL 请求会产生不同的结果,否则这种情况并不是标准的;在这种情况下显然不是如此。因此,最重要的问题是:你能否自己复现错误? 如果可以,那么调试应该比其他场景容易得多。如果你认为缓存已经禁用,请验证一下。例如:你的浏览器中的开发者工具?你需要分析你所做的来验证高度的置信度。你要么没有考虑到导致问题的原因,要么就是忽略了某些东西。尝试使用 Winmerge 来比较头部请求。 - John
1
@Gana 是的,我看到了日志中的错误。我正在清理它并尝试重建私人消息。完成后,我会在那里和这里回复你。我非常擅长找出错误。 :-) - John
显示剩余5条评论

1
我发现摆脱这个问题的唯一方法是将样式和脚本文件嵌入到jsp文件中。 我已经压缩了每个CSS和.js文件,并将它们嵌入到jsp文件中。 这解决了问题!!

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接