英文:
MIME-TYPE Exception Main.css Spring Boot
问题
我真的很困惑如何解决这个 bug。针对不同情况有很多所谓的解决方案,但似乎都不适用于我。希望随着我找到这个问题的答案,我能够理解到底发生了什么。请注意,我在这个项目中使用了 Spring Boot。
问题
我已经成功地将 Sass 实现到了我的项目中,并且看起来它正常工作。我可以在我的 pom.xml 中指定源文件夹和目标文件夹。然而,每当我尝试在 HTML 文件中引用 CSS 文件时,都没有成功。我在 Chrome Dev Tools 中看到的错误是:
Refused to apply style from 'http://localhost:8080/css/main.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
这是我的搜索结果:
- MIME 类型为 Q #1 而未加载样式表 我最初搜索了具体的错误,并得到了这个 StackOverflow 帖子。链接的答案表示,他认为问题与以注释开头的 CSS 库有关。他认为由于一些注释,MIME 类型已经改变了。所以我尝试在我的最终 CSS 文件中删除了所有注释。再一次,没有运气。
- MIME 类型为 Q #2 而未加载样式表 同一篇帖子中的另一个较低的答案表明,当你没有正确引用 CSS 文件时,错误可能会出现。我认为这可能是问题所在,但我并不完全理解我的 Spring Boot 设置是如何处理静态文件的,或者是否由于缺乏配置而根本没有处理静态文件。
- MIME 类型为 Q #3 而未加载样式表 这个答案进一步确立了我的 CSS 文件路径错误的情况,它返回了一个 "status: 404" 并附带了一些 HTML 类型的 "Not Found" 内容负载。因此,这就解释了为什么会出现 MIME 类型异常。
- https://stackoverflow.com/questions/55178482/mime-type-text-html-is-not-a-supported-stylesheet-mime-type 这个问题似乎与 Spring Boot 无关,所以我得出结论,这对我可能没有什么帮助。
在解决 MIME 类型异常时没有成功之后,我意识到也许我并不完全理解在 Spring Boot 环境中如何使资源公开,所以我搜索了关于此的信息:
- https://stackoverflow.com/questions/21203402/css-not-loading-in-spring-boot
- https://stackoverflow.com/questions/45536972/how-add-css-and-js-to-spring-boot-application
- https://stackoverflow.com/questions/27170772/where-to-put-static-files-such-as-css-in-a-spring-boot-project
这些问题的大部分答案要求禁用 @EnableWebMVC 以允许 Spring Boot 的自动配置。然而,我一直在遵循的教程中使用了 @EnableWebMVC,而且我不想尝试更复杂的配置 WebSecurityConfigurer 的方法,特别是因为我仍然不理解如何进行基本的设置。
我的下一个理论是 Spring Boot Security 可能限制了对 CSS 文件的访问。
- https://stackoverflow.com/questions/25368535/spring-security-does-not-allow-css-or-js-resources-to-be-loaded
我已经尝试使用各种安全权限,但我没有成功。
文件结构
源代码
您可以在此存储库中找到所有相关代码:https://github.com/CloakingOcean/CampaignChronicle
谢谢大家抽出时间来帮助我!我真的想在 Spring 开发中取得进展,有了你们所有人的帮助,我可能会成功!
英文:
I am really confused about how to approach the resolution for this bug. There are many supposed solutions for different situations that don't seem to apply to me directly. And hopefully, as I find answers to this question, I can comprehend what exactly is going on here. Please note I'm using Spring Boot for this Project
Problem
I have successfully implemented Sass into my project and it appears to be working correctly. I can designate the source and target folders in my pom.xml. However, whenever I attempt to reference the CSS file in my HTML file, I am unsuccessful. The error I am seeing in Chrome Dev Tools is this:
Refused to apply style from 'http://localhost:8080/css/main.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
This is the result of my searching:
- Stylesheet not loaded because of MIME-type Q #1 I initially searched up the specific error and received this StackOverflow post. The linked answer states that he believed that the problem was related to a CSS library starting with comments. I believe he thinks because of some comments, the MIME-type had changed. So I attempted to remove all comments in my final css file. Once again, no luck.
- Stylesheet not loaded because of MIME-type Q #2 Another lower answer on the same post states that the error can come up when you're not referring to your CSS file properly. I believe this is likely the case, but I don't completely understand how my setup of spring-boot is handling the static files, or if it is not doing so at all because of lack of configuration.
- Stylesheet not loaded because of MIME-type Q#3 This answer further solidifies the case that my CSS file path is wrong, and that it's returning
"status: 404
with someNot Found
content payload of HTML type". And because of this, it makes sense why it would return a MIME-type exception. - https://stackoverflow.com/questions/55178482/mime-type-text-html-is-not-a-supported-stylesheet-mime-type This question seemed to be aimed at something unrelated to Spring-Boot, so I concluded that it wouldn't be very helpful to me.
After not being successful with resolutions to the MIME-type exception, I realized perhaps I didn't completely understand how resources were made public in a Spring-Boot environment, so I searched for information about this:
- https://stackoverflow.com/questions/21203402/css-not-loading-in-spring-boot
- https://stackoverflow.com/questions/45536972/how-add-css-and-js-to-spring-boot-application
- https://stackoverflow.com/questions/27170772/where-to-put-static-files-such-as-css-in-a-spring-boot-project
Most of the answers to these questions required @EnableWebMVC to be disabled to allow the auto-configuration of Spring-Boot. However, the tutorial I'd been following had used @EnableWebMVC and I didn't want to try and approach the more complex method of configuring a WebSecurityConfigurer, especially since I still don't understand how to do the basic approach.
My next theory was that Spring Boot Security may be restricting access to the css files.
- https://stackoverflow.com/questions/25368535/spring-security-does-not-allow-css-or-js-resources-to-be-loaded
I've attempted to utilize the various security permissions, but I wasn't able to get it working.
File Structure
Source Code
You can find all of the relevant code here in the repository: https://github.com/CloakingOcean/CampaignChronicle
Thank you for anyone taking the time to assist me! I really want to progress forward in spring development, and with help from all of you, I just might!
答案1
得分: 0
Ah,我已经找出了我的错误。我的项目依赖于Thymeleaf。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
因此,它期望为Spring Boot的公共资源设置与Thymeleaf相关的配置。
这个帖子:https://stackoverflow.com/questions/41586841/thymeleaf-cssspringboot#answer-41590563,展示了如何使用Thymeleaf来设置默认的Thymeleaf结构,以及如何在HTML文档中链接文件。然而,不幸的是,我确实需要禁用@EnableWebMVC。我将不得不发现我项目中的哪些重大变化是由此引起的。
<link href="../static/css/Layout.css" th:href="@{/css/Layout.css}" rel="stylesheet" />
英文:
Ah, I've figured out my mistake. My project is depending on Thymeleaf
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Thus, it's expecting thyme leaf related configuration for the spring boot public assets.
This post: https://stackoverflow.com/questions/41586841/thymeleaf-cssspringboot#answer-41590563, shows how to use Thymeleaf to set up the default Thymeleaf structure, and how to link the files in an HTML document. However, unfortunately, I did need to disable @EnableWebMVC. I will have to discover what major changes in my project are a result of this.
> <link href="../static/css/Layout.css" th:href="@{/css/Layout.css}" rel="stylesheet" />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论