Springboot -资源被解释为样式表,但以MIME类型text/htm传输

oknrviil  于 2022-12-10  发布在  Spring
关注(0)|答案(5)|浏览(160)

我以前看到过很多关于这个问题的答案,但我尝试过的解决方案都不起作用。
我的login.css没有被应用到我的Sping 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都没有问题。而且浏览器返回的login.css带有302状态代码
谢谢

z9smfwbn

z9smfwbn1#

我在使用Sping 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后,一切都开始正确加载。
很奇怪,像这样的一个小错误怎么会影响到我的整个计划。
希望它对面临同样问题的人有所帮助。

toiithl6

toiithl62#

这是我如何解决这个问题:
我把我的css文件放在:

/static/css/login.css

等等
然后在html中引用为:

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

谢谢出去!

pdtvr36n

pdtvr36n3#

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

IDK如果我的问题完全是个人问题,或者如果其他开发人员经常遇到同样的问题,但我在学习新的后端框架时似乎总是在同一点上遇到麻烦:每次学习框架时,我总是在试图弄清楚如何将我的stylesheets链接到我的HTML文档,以及如何正确配置项目以处理HTML发出的CSS请求时陷入困境 标签。我的样式表链接到我的HTML文档。这是我在学习PHP的Laravel和Node的Express JS时遇到的相同问题。
就我个人而言,我一直发现,配置一个项目来处理对文件系统中文档的HTTP请求的最简单方法是简单地拥有一个基目录,所有的HTMLCSS,和前端JS文档都可以放入其中--很像标准的原始服务器所做的(即Nginx和Apache)。

事实证明,这就是Sping Boot 的工作原理!

所以我想你在阅读到一个关于CSS服务的问题后也明白了这一点。我的意思是,除非你首先成功地服务了HTML文档,否则你不会想服务CSS。
如果您熟悉Apache这样的典型服务器,那么查看 Sping Boot * 和提供静态文件的好方法是将**Resources*文件夹视为您的/var/www/html**目录。
在使用Sping Boot 创建静态文件系统时,了解3件事非常重要。
1.如果您对文件进行了更改,重新生成了项目,然后刷新了浏览器,您可能会惊讶地发现一切正常。
1.如果你试图通过一个控制器路由任何静态文件,停止!这不是Sping Boot 的使用方式。你的控制器是用于逻辑的,而不是路由。当提供静态文件时,只使用你的资源文件夹静态目录。
1.最后,但远离leaset,你需要得到你的静态目录组织正确,下面是一些片段,以帮助.

这是我如何配置静态目录的文件系统树。
.
└── 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*/
在上面,您可以看到我为静态文档创建了两个目录。

1.#####HTML文件的目录。
1.#####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属性中。
wgmfuz8q

wgmfuz8q4#

这种类型的错误可能会发生,因为服务器有一个错误...在我的情况下,文件不存在于服务器上
在我的例子中,服务器响应MIME TYPE是'application/json',可能是因为它是一个错误。
此外,我的应用程序此时无法正确管理错误。
祝你好运!🧐

igetnqfo

igetnqfo5#

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

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

相关问题