Menu
I see a number of answers to this question previously but none of the solutions I have tried worked.
My login.css is not getting applied to login.html in my Spring Boot application. I am also using Thymeleaf.
Security is turned on - but I do not think this is the issue as in the browser. I do not see a failure to load login.css - only the message:
Resource interpreted as Stylesheet but transferred with MIME type text/html:
Further inspection in the browser shows it is requesting text/css, but getting a text/html response.
The 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"/>
The path for the login.html
\src\main\resources\templates\login.html
The path for login.css
\src\main\resources\static\login.css
And just in case it was a permissions issue I put:
.antMatchers("/css/**").permitAll()
I noted there is no issue with all the css delivered via CDN. Also the browser is returning the login.css with a 302 status code.
Thanks
326
I had the exact same issue while writing some code with Spring Boot + Spring MVC. The CSS files set using a CDN worked fine, while the CSS file set from my static/css folder returned a HTML content.
Example:
<!-- 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" />
After a while I could see using Chrome Dev Tools that the content returned for my local style.css was the same as one of my HTML pages.
Inspecting the route that pointed to the HTML file with that content, I could realise I was using the wrong property for the @RequestMapping configuration. I had @RequestMapping(name="..."), instead of @RequestMapping(path="...").
Controller with the problem
@RequestMapping(name = "/product/add", method = RequestMethod.GET)
public String add(Model model) {
model.addAttribute("product", new Product());
return "product/edit";
}
Controller changed
@RequestMapping(path = "/product/add", method = RequestMethod.GET)
public String add(Model model) {
model.addAttribute("product", new Product());
return "product/edit";
}
After changing the property name for path everything started being loaded correctly.
It was strange how a small mistake like this affected my whole program.
Hope it's somehow useful for someone who faces the same issue.
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
