Springboot - 资源解释为样式表，但使用 MIME 类型 text/htm 传输

Posted 2023-02-19

技术标签:

【中文标题】Springboot - 资源解释为样式表，但使用 MIME 类型 text/htm 传输【英文标题】：Springboot - Resource interpreted as Stylesheet but transferred with MIME type text/htm 【发布时间】：2017-09-02 04:15:41 【问题描述】：

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

我的 login.css 没有在我的 Spring Boot 应用程序中应用到 login.html。我也在使用 Thymeleaf。

安全性已打开 - 但我认为这不是浏览器中的问题。我没有看到无法加载 login.css - 只有消息：

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

在浏览器中进一步检查显示它正在请求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

login.css的路径

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

以防万一这是我提出的权限问题：

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

我注意到通过 CDN 交付的所有 css 都没有问题。浏览器还返回带有 302 状态代码的login.css。

谢谢

【问题讨论】：

【参考方案1】：

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

我将我的 css 文件放入：

/static/css/login.css

等

然后在 html 中它被引用为：

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

谢谢。出去！

【讨论】：

【参考方案2】：

我在使用 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";

将name 属性更改为path 后，一切都开始正确加载。

奇怪的是，像这样的小错误如何影响了我的整个程序。

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

【讨论】：

我正在使用@GetMapping 并将其替换为@RequestMapping(path=..., method= RequestMethod.GET) 但对我来说没有成功，仍然是同样的错误:( 对我来说类似的错误我有一个 @GetMapping() 没有任何路径值，它导致了同样的问题【参考方案3】：

对我来说，它定义的不仅仅是一个返回相同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)

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

【讨论】：

【参考方案4】：

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

在我的例子中，服务器响应 MIME TYPE 是 'application/json'，可能是因为它是一个错误。

此外，我的应用程序目前无法正确管理错误。

祝你好运！ ?

【讨论】：

【参考方案5】：

一个耗时耗力的小问题

IDK 如果我的问题完全是个人问题，或者其他开发人员经常遇到相同的问题，但我在学习新的后端框架时似乎总是在同一点遇到问题：每次学习框架时，我总是在尝试时遇到困难弄清楚如何将我的stylesheets 链接到我的HTML 文档，以及如何正确配置项目以处理由HTML ` 标签提出的CSS 请求。我的样式表链接到我的 HTML 文档。这与我在学习 PHP 的 Laravel 和 Node 的 Express JS 时遇到的问题相同。

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

原来，这就是 Spring Boot 的工作原理！

所以我假设你在阅读了一个关于提供 CSS 的问题后也明白了这一点。我的意思是，除非您首先成功地提供 HTML 文档，否则您不会希望提供 CSS。

如果您熟悉像 Apache 这样的典型服务器，那么查看 Spring Boot 和提供静态文件的好方法是查看 Resources 文件夹作为您的 /var/www/html 目录。

在使用 Spring Boot 创建静态文件系统时，了解 3 件事很重要。

如果您对文件进行了更改，重新构建项目，然后刷新浏览器，您可能会惊讶地发现一切正常。

如果您尝试通过控制器路由任何静态文件，请停止！这不是 Spring Boot 的预期用途。您的控制器用于逻辑，而不是路由。仅在提供静态文件时使用您的资源文件夹静态目录。

最后，但远非lealet，你需要正确组织你的静态目录，下面是一些帮助你的sn-ps。

这是我如何配置静态目录的文件系统树。

.
└── 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">) 的正确 vulues

    ./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