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
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.
This how i fixed this issue:
I put my css files in :
/static/css/login.css
etc
Then in the html it was referenced as :
<link rel="stylesheet" href="/css/login.css" type="text/css"/>
Thanks. Out!
if you are using mvc-model. you can solve by
spring.mvc.servlet.load-on-startup=1
to add application.properties file
I read from here
https://www.javatpoint.com/load-on-startup
This type of error may happened because the server had an error... in my case, file did not exist on the server
In my case the server response MIME TYPE was 'application/json', perhaps because it's an error.
Also my application does not properly manage errors at this time.
Good luck!
