解决IE11报错:CSS 因 Mime 类型不匹配而被忽略

简要概述:

本人用springboot开发网站,手动处理js和css文件请求,报错:CSS 因 Mime 类型不匹配而被忽略

后台代码:

如下三个代码块

@GetMapping("/Guest/ASN1/{FileName}")
	public void GetFiles(@PathVariable("FileName") String fileName, HttpServletRequest request, HttpServletResponse response) {
		if (fileName == null) {
			return;
		}
		ResponseFile.ResponseWriteStreamFile(UserDir.GetResourceDir() + "asn1js/" + fileName, response);
	}
public static void ResponseWriteStreamFile(String fileName, HttpServletResponse response) {
		OutputStream httpResponseStream = null;
		File fileTmp = null;
		
		fileTmp = new File(fileName);		
		try {
			if (fileTmp.length() < 0) {
				fileTmp = null;
				return;
			}
			response.setContentLengthLong(fileTmp.length());
			System.out.println(fileName + " " + fileTmp.length());
			httpResponseStream = response.getOutputStream();
			ResponseWriteStreamFile(fileName, httpResponseStream);
		} catch (IOException e) {
			// TODO Auto-generated catch block        
			e.printStackTrace();
		}
		fileTmp = null;
	}
public static void ResponseWriteStreamFile(String fileName, OutputStream httpResponseStream) {
		FileInputStream in = null;
		int i = 0;
		byte[] buf = null;
		
		try {
			in = new FileInputStream(fileName);
			buf = new byte[2048];
		        
	        while (true) {
	        	i = in.read(buf);
	        	if (i <= 0) {
	        		break;
	        	}
	        	httpResponseStream.write(buf, 0, i);
	        }
	        in.close();
	        in = null;
		} catch (IOException e) {
			// TODO Auto-generated catch block                       
			e.printStackTrace(); 			
		} 
		if (in != null) {
			try {
				in.close();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
	        in = null;
		}
	}

前端代码:

关键引用css和js部分,就是一般引用,没什么特殊处理,如下:

<link rel="stylesheet" type="text/css" href="/Guest/ASN1/index.css" />
<script type="text/javascript" src="/Guest/ASN1/hex.js"></script>
<script type="text/javascript" src="/Guest/ASN1/base64.js"></script>
<script type="text/javascript" src="/Guest/ASN1/oids.js"></script>
<script type="text/javascript" src="/Guest/ASN1/int10.js"></script>
<script type="text/javascript" src="/Guest/ASN1/asn1.js"></script>
<script type="text/javascript" src="/Guest/ASN1/dom.js"></script>
<script type="text/javascript" src="/Guest/ASN1/index.js"></script>

运行报错:

如下在IE11里面报错,报错之后,css文件不起作用。但是在谷歌浏览器不会报错,出错如下:
在这里插入图片描述
有时候还会报另外错:css 未载入,因为它的 MIME 类型 “text/plain“ 不是 “text/css“

分析问题:

费劲查了很久终于明白,根据提示,
是因为http头,ContentType不是浏览器所期望的。
因为手动控制下载css和js,ContentType就没有设置(如果自动下载springboot会设置好ContentType),所以就不确定是什么值,有可能是text/plain。

解决问题:

根据下载css还是js,分别设置好ContentType,上面第一个代码函数GetFiles,改为如下:

@GetMapping("/Guest/ASN1/{FileName}")
	public void GetFiles(@PathVariable("FileName") String fileName, HttpServletRequest request, HttpServletResponse response) {
		if (fileName == null) {
			return;
		}
		if (fileName.endsWith(".css")) {
			response.setContentType("text/css");
		} else if (fileName.endsWith(".js")) {
			response.setContentType("text/javascript");
		}
		ResponseFile.ResponseWriteStreamFile(UserDir.GetResourceDir() + "asn1js/" + fileName, response);
	}

注意添加了代码段:
if (fileName.endsWith(“.css”)) {
response.setContentType(“text/css”);
} else if (fileName.endsWith(“.js”)) {
response.setContentType(“text/javascript”);
}

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-22 19:00:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-22 19:00:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-22 19:00:03       82 阅读
  4. Python语言-面向对象

    2024-03-22 19:00:03       91 阅读

热门阅读

  1. 回文素数

    2024-03-22 19:00:03       42 阅读
  2. 蓝桥杯 完全二叉树的权值

    2024-03-22 19:00:03       53 阅读
  3. 【医疗-单位计算】

    2024-03-22 19:00:03       46 阅读
  4. CAS(compare and swap)算法

    2024-03-22 19:00:03       42 阅读
  5. 【NLP5-RNN模型、LSTM模型和GRU模型】

    2024-03-22 19:00:03       33 阅读
  6. tomcat安装及配置教程

    2024-03-22 19:00:03       43 阅读