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

news2024/11/17 19:43:09

简要概述:

本人用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”);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1537925.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

阿里云 EMR Serverless Spark 版免费邀测中

随着大数据应用的广泛推广&#xff0c;企业对于数据处理的需求日益增长。为了进一步优化大数据开发流程&#xff0c;减少企业的运维成本&#xff0c;并提升数据处理的灵活性和效率&#xff0c;阿里云开源大数据平台 E-MapReduce &#xff08;简称“EMR”&#xff09;正式推出 E…

SQL中条件放在on后与where后的区别

数据库在通过连接两张或多张表来返回记录时&#xff0c;都会生成一张中间的临时表&#xff0c;然后再将这张临时表返回给用户。 在使用left jion时&#xff0c;on和where条件的区别如下&#xff1a; on条件是在生成临时表时使用的条件&#xff0c;不管on中的条件是否为真&…

深度学习Top10算法之深度神经网络DNN

深度神经网络&#xff08;Deep Neural Networks&#xff0c;DNN&#xff09;是人工神经网络&#xff08;Artificial Neural Networks&#xff0c;ANN&#xff09;的一种扩展。它们通过模仿人脑的工作原理来处理数据和创建模式&#xff0c;广泛应用于图像识别、语音识别、自然语…

Dell戴尔XPS 12 9250二合一笔记本电脑原装出厂Windows10系统包下载

链接&#xff1a;https://pan.baidu.com/s/1rqUEM_q5DznF0om6eevcwg?pwdvij0 提取码&#xff1a;vij0 戴尔原厂WIN10系统自带所有驱动、出厂主题壁纸、系统属性专属联机支持标志、系统属性专属LOGO标志、Office办公软件、MyDell等预装程序 文件格式&#xff1a;esd/wim/sw…

Spring Cloud Alibaba Sentinel 使用详解

一、Sentinel 介绍 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。 Sentinel 以流量为切入点&#xff0c;从流量控制、熔断降级、系统负载保护等多个维度保护服务的稳定性。 Sentinel 具有以下特征: 丰富的应用场景&#xff1a; Sentinel 承接了阿里巴…

【BUG】java.nio.charset.MalformedInputException: Input length = 1

springboot maven 项目启动 编码异常 修改 ERROR org.springframework.boot.SpringApplication - Application run failed java.nio.charset.MalformedInputException: Input length 1 … 修改编码为UTF-8maven : clean -> compile

深度学习:复杂工业场景下的复杂缺陷检测方法

摘要&#xff1a;在复杂的工业场景中&#xff0c;缺陷检测一直是一个重要而具有挑战性的任务。近年来&#xff0c;深度学习技术的快速发展为复杂工业场景下的缺陷检测提供了新的解决方案。本文将介绍深度学习在复杂工业场景下的复杂缺陷检测中的应用&#xff0c;并探讨其技术进…

cool-admin-node.js 中redis缓存的使用

1. 在做cool 后端的时候 用户登录 时的token 需要鉴权的value 以及发送验证码 这些 需要存到缓存里面 &#xff0c;进行逻辑鉴权 所以我们需要用到redis 缓存 或者数据库缓存 我这里介绍一下redis 的缓存 在cool-admin 中 使用的一般都是宝塔面板 首先得有服务器 需要有自己的…

如何屏蔽来自一些可疑IP对网站的访问

前段时间我们的网站遭受到黑客的攻击&#xff0c;导致网站出现乱码以及丢失了一些网站文件。在我们将网站全部迁移至Hostease虚拟主机后&#xff0c;为了再次避免这种情况发生&#xff0c;我们对网站做了一些安全防护&#xff0c;除了安装一些安全插件之外&#xff0c;我们还屏…

计算机组成原理 数据通路组成实验

一、实验目的 (1)将双端口通用寄存器堆和双端口存储器模块联机; (2)进一步熟悉计算机的数据通路; (3)掌握数字逻辑电路中故障的一般规律&#xff0c;以及排除故障的一般原则和方法; (4)锻炼分析问题与解决问题的能力&#xff0c;在出现故障的情况下&#xff0c;独立分析故障…

基于CSS3制作专属可自由旋转的立方体

一、代码区域 1.1 css3代码区域 <style>* {padding: 0;margin: 0;list-style: none;}/* 1) 定义动画 */keyframes loop {0% {transform: rotateX(348deg) rotateY(67deg) rotateZ(95deg);}50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}100% {transform:…

【C++】1597. 买文具

问题&#xff1a;1597. 买文具 类型&#xff1a;基本运算、整数运算 题目描述&#xff1a; 花花去文具店买了 1 支笔和 1块橡皮&#xff0c;已知笔 x 元/ 支&#xff0c;橡皮 y元 / 块&#xff0c;花花付给了老板 n 元&#xff0c;请问老板应该找给花花多少钱&#xff1f; 输…

SQLiteC/C++接口详细介绍sqlite3_stmt类(十三)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;十二&#xff09; 下一篇&#xff1a; 待续 51、sqlite3_stmt_scanstatus_reset sqlite3_stmt_scanstatus_reset 函数用于重置指定语句对象最近一次执行的 WHER…

基于python+vue的OA公文发文管理系统flask-django-php-nodejs

系统根据现有的管理模块进行开发和扩展&#xff0c;采用面向对象的开发的思想和结构化的开发方法对OA公文发文管理的现状进行系统调查。采用结构化的分析设计&#xff0c;该方法要求结合一定的图表&#xff0c;在模块化的基础上进行系统的开发工作。在设计中采用“自下而上”的…

大模型分布式推理ray

一、目录 1 框架 2. 入门 3. 安装教程 4. 相关文档、案例阅读 二、实现 1 框架&#xff1a;Ray&#xff1a;将一个模型拆分到多个显卡中&#xff0c;实现分布式预测、训练等功能。 2. 入门 &#xff1a; 案例&#xff1a;通过ray 实现分布式部署&#xff0c;分布式推理服务。…

【ReactJS】使用GoJS实现自己的图表App

目录 1:用于绘制自定义图表的JavaScript库:用于绘制UML(或BPMN或ERD …)图表的JavaScript库:2:为什么选择GoJS?3:让我们使用现有的React应用程序:步骤1:步骤2:步骤3:步骤4:推荐超级课程: Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战1:…

Kubernetes自动化配置部署

在新建工程中&#xff0c;使用k8s的devops服务&#xff0c;自动化部署项目 1、在搭建好k8s的集群中&#xff0c;确认已开启devops服务&#xff1b; 2、新建Maven项目之后&#xff0c;创建dockerfile、deploy和Jenkins文件 例如&#xff1a; Dockerfile FROM bairong.k8s.m…

数据仓库的数据处理架构Lambda和Kappa

1.数据仓库 数据仓库(Data Warehouse),简写DW。顾名思义,数据仓库是一个很大的数据存储集合,为企业分析性报告和决策支持而创建,是对多元业务数据的筛选与整合,具备一定的BI能力,主要用于企业的数据分析、数据挖掘、数据报表等方向,指导业务流程改进、监视时间、成本、…

斯坦福大学研究团队革新电机技术,助力机器人性能飞跃提升

文 | BFT机器人 在科技日新月异的今天&#xff0c;我们期望机器能够胜任的任务愈发复杂且多变。无论是为失去肢体的人提供动力的假肢&#xff0c;还是那些独立在外部世界自由穿梭的机器人&#xff0c;它们都需要在多种场景下展现出卓越的行动能力。 然而传统的标准电动机&…

【Java基础】了解Java安全体系JCA,使用BouncyCastle的ED25519算法生成密钥对、数据签名

文章目录 一.Java安全体系结构二.JCA和JCE三.CSP(加密服务提供程序)与Engine类1.CSP2.Engine类如何使用引擎类 四.查看当前JDK支持的算法服务提供商(Provider)五.BouncyCastle是什么六.如何使用BouncyCastle&#xff1f;七.bouncycastle实现ED25519工具类 一.Java安全体系结构 …