Sping Boot 页面css无法加载 because its MIME type ('application/json') is not a supported stylesheet ...

最新推荐文章于 2024-02-17 16:39:06 发布

Chgl16

最新推荐文章于 2024-02-17 16:39:06 发布

阅读量9w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Spring Boot 前端开发文章标签： Sping Boot 页面css无法加载 because its MI

本文链接：https://blog.csdn.net/chenbetter1996/article/details/85092531

前端开发同时被 2 个专栏收录

21 篇文章

订阅专栏

Spring Boot

11 篇文章

订阅专栏

本文探讨了SpringBoot项目中static文件夹下资源的加载问题，特别是在开发前端页面时遇到的MIME类型错误，提供了多种有效的解决方案，包括使用Thymeleaf引用法和调整相对路径引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误描述

Refused to apply style from 'http://localhost:8080/static/css/login.css' 
because its MIME type ('application/json') is not a supported stylesheet MIME type, 
and strict MIME checking is enabled.

显然 http://localhost:8080/static/css/login.css 被拦截了，所以无法加载应用。

在这里插入图片描述

因为Spring Boot默认拦截static下的静态资源的这种访问方式。单只是开发前端页面的时候
href="…/static/css/xx.css" (对于templates下的HTML文件)是没问题的。

但是如果运行时是 host://port/css/xx.css 是可以访问到资源的。
就是static文件夹是应该缺省的。但是这Spring Boot运行时有效。普通前端页面这样相对路径引用肯定不行。

解决方法

<!-- thymeleaf引用法 -->
<link rel="stylesheet" type="text/css" th:href="@{css/login.css}">
<link rel="stylesheet" type="text/css" href="/css/login.css">
<link rel="stylesheet" type="text/css" href="css/login.css">

这三种对运行时都有效

<link rel="stylesheet" type="text/css" href="../static/css/login.css">

页面设计时还是得照常的相对路径

总结：Spring Boot项目默认运行时static文件夹是缺省的。所以编辑静态文件的引用的相对路径还是已运行时为准。页面设计时就照常加static的相对路径。