Springboot - 资源被解释为样式表，但传输的 MIME 类型为 text/html。

Question

Springboot - 资源被解释为样式表，但传输的 MIME 类型为 text/html。

cssspringspring-mvcspring-bootthymeleaf

8

我看到之前有很多关于这个问题的答案，但我尝试过的解决方案都没有起作用。

在我的Spring Boot应用程序中，login.css无法应用于login.html，我还使用了Thymeleaf。

已开启安全性 - 但我不认为这是问题，因为在浏览器中。我没有看到login.css加载失败的消息 - 只有以下消息:

将资源解释为样式表，但以text/html MIME类型传输：

在浏览器中进一步检查显示它正在请求text/css，但得到了一个text/html响应。

HTML代码：

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<head>

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatiable" content="IE-Edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="Login"/>


<title>LOGIN</title>

<!-- Latest compiled and minified CSS -->

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

login.html的路径

\src\main\resources\templates\login.html

< p > login.css 的路径

\src\main\resources\static\login.css

为了防止这是权限问题，我加上了：

.antMatchers("/css/**").permitAll()

我注意到通过CDN提供的所有CSS都没有问题。此外，浏览器返回带有302状态码的login.css。

谢谢

- Al Grant

5个回答

1

一个可能会耗费时间的小问题

我不确定我的问题是严格个人的，还是其他开发人员经常遇到相同的问题，但我似乎总是在学习新的后端框架时遇到麻烦：每次我学习一个框架时，我总是卡在尝试弄清如何将我的样式表链接到我的HTML文档以及如何正确配置项目来处理HTML中对CSS请求的问题上。这也是我学习PHP的Laravel和Node的Express JS时遇到的相同问题。

就我个人而言，我始终发现配置项目以处理存储在文件系统中的文档的HTTP请求最简单的方法是简单地拥有一个基本目录，所有HTML、CSS和前端JS文档都可以放入其中——就像标准的原始服务器一样（即Nginx和Apache）。

结果证明，这就是Spring Boot的工作方式！

因此，我认为您也已经发现了这一点，因为您正在阅读一个关于提供CSS服务的问题，我想说，除非您成功地提供了HTML文档，否则您不会想提供CSS。

如果您熟悉典型的服务器（如Apache），那么理解Spring Boot和静态文件服务的一种好方法是将“Resources”文件夹视为您的“/var/www/html”目录。创建静态文件系统时，有三个重要的事情需要了解：

1. 如果您对文件进行了更改，请重新构建项目，然后刷新浏览器，您可能会惊讶地发现一切都正常工作。 2. 如果您尝试通过控制器路由任何静态文件，请停止！这不是Spring Boot的预期用法。您的控制器用于逻辑，而不是路由。只有在提供静态文件时才使用资源文件夹的静态目录。 3. 最后但并非最不重要的是，您需要正确组织静态目录。以下是一些片段以帮助您。
这是一个文件系统树，展示了我如何配置我的静态目录。

.
└── resources/
    │
    └── static/
        │
        ├── css/
        │   ├── index.css
        │   ├── alpha.css
        │   └── beta.css    
        │
        ├── html/
        │   ├── index.html
        │   ├── alpha.html
        │   └── beta.html
        │
        │
        └── templates
            └──── /* Your template files are not
                      important for this topic*/

在上面，您可以看到我创建了两个静态文档目录。

一个HTML文档的目录。一个CSS样式表的目录。

这是在IntelliJ中的样子。

现在，当你使用<link rel="" href="">标签来链接你的样式表时，你需要输入正确的URL。如果URL无效，并且你正在使用IntelliJ，你将会收到一个警告，否则，你可能会发现一些东西根本不起作用。

这是文件树的样子，完整的相关文件路径而不是文件名。这些值是你想要添加到link标签的href属性中的正确值(<link rel="stylesheet" href="/.../file.css">)。

    ./resources/
    │   
    ├── ./static/templates
    │   |
    │   └──  /* Again, template paths are
    |       not relevent for this topic */
    │
    └── ./static/
        │
        ├── ./static/css/
        │   ├── ./static/css/index.css
        │   ├── ./static/css/alpha.css
        │   └── ./static/css/beta.css    
        │
        └── ./static/html/
            ├── ./static/html/index.html
            ├── ./static/html/alpha.html
            └── ./static/html/beta.html

因此，如果您正在构建此项目，则可以将每个./static/html/<filename>.html/css文件路径添加到<link>标签的href属性中。

- JΛYDΞV

1

这是我解决这个问题的方法：

我把我的CSS文件放在了这里：

/static/css/login.css

然后在HTML中，它被引用为：

etc

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

谢谢。出门！

- Al Grant

0

这种类型的错误可能是因为服务器出现了错误...在我的情况下，文件在服务器上不存在。

在我的情况下，服务器响应的 MIME 类型是“application/json”，可能是因为发生了错误。

此外，我的应用程序目前没有正确地处理错误。

祝你好运！

- Raymond Naseef

0

对我来说，这不仅仅是定义一个返回相同ModelAndView的控制器方法。

@GetMapping("/home")
fun home(model: ModelMap): ModelAndView {
    model.addAttribute("model", SomeModel())
    return ModelAndView("home", model)
}

@GetMapping
fun index(model: ModelMap): ModelAndView {
    model.addAttribute("model", SomeModel())
    return ModelAndView("home", model)
}

移除其中一种方法解决了问题。

- Thami Bouchnafa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tom · Accepted Answer

在使用 Spring Boot + Spring MVC 编写代码时，我遇到了完全相同的问题。使用 CDN 引入的 CSS 文件可以正常工作，但是从我的 static/css 文件夹引用的 CSS 文件返回了 HTML 内容。

例如：

<!-- This first worked fine, loading all styles -->
<link th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"
      href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet" media="screen" />

<!-- This second one returned the content of an HTML - Content Type text/html -->
<link rel="stylesheet" th:href="@{/css/login/style.css}" href="/css/login/style.css" />

过了一会儿，我使用Chrome开发者工具发现本地style.css文件返回的内容与我的HTML页面之一相同。

检查指向包含该内容的HTML文件的路由后，我意识到我在@RequestMapping配置中使用了错误的属性。我使用了@RequestMapping(name="...")，而不是@RequestMapping(path="...")。

存在问题的控制器

@RequestMapping(name = "/product/add", method = RequestMethod.GET)
public String add(Model model) {
    model.addAttribute("product", new Product());
    return "product/edit";
}

控制器已更改

@RequestMapping(path = "/product/add", method = RequestMethod.GET)
public String add(Model model) {
    model.addAttribute("product", new Product());

    return "product/edit";
}

在使用 path 更改属性 name 后，一切都开始正确加载了。

一个小错误就能影响整个程序，这真是奇怪。

希望对面临同样问题的人有所帮助。