MIME-TYPE 异常 Main.css Spring Boot

huangapple go评论93阅读模式
英文:

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 环境中如何使资源公开,所以我搜索了关于此的信息:

这些问题的大部分答案要求禁用 @EnableWebMVC 以允许 Spring Boot 的自动配置。然而,我一直在遵循的教程中使用了 @EnableWebMVC,而且我不想尝试更复杂的配置 WebSecurityConfigurer 的方法,特别是因为我仍然不理解如何进行基本的设置。

我的下一个理论是 Spring Boot Security 可能限制了对 CSS 文件的访问。

文件结构

文件结构

源代码

您可以在此存储库中找到所有相关代码: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 some Not 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:

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.

File Structure

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

&lt;dependency&gt;
    &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
    &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
&lt;/dependency&gt;

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.

> &lt;link href=&quot;../static/css/Layout.css&quot; th:href=&quot;@{/css/Layout.css}&quot; rel=&quot;stylesheet&quot; /&gt;

huangapple
  • 本文由 发表于 2020年4月8日 03:31:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/61087978.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定