CODEWITHSUNDEEP
cssspringspring-mvcspring-bootthymeleaf
datGnomeLife
datGnomeLife

Reputation: 186

Springboot - Resource interpreted as Stylesheet but transferred with MIME type text/html

Ok, totally stumped here. My boot app is not serving up any static resources. CSS is not being applied, images aren't being loaded. No security yet, so I don't think that's the problem.

Checking the Console output I get

Resource interpreted as Stylesheet but transferred with MIME type text/html

Everything is 200

Shows everything loading

But if you look at the response... that's not bootstrap

enter image description here

I believe I am using the correct default file structure

enter image description here

Here's the code:

Pom.xml

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-actuator</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!-- WEB JARS -->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>3.3.7-1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.2.0</version>
    </dependency>
    <!-- JDBC -->
    <dependency>
        <groupId>net.sourceforge.jtds</groupId>
        <artifactId>jtds</artifactId>
        <version>1.3.1</version>
    </dependency>
    <!-- LOGGING -->
    <dependency>
        <groupId>net.logstash.logback</groupId>
        <artifactId>logstash-logback-encoder</artifactId>
        <version>4.7</version>
    </dependency>
    <!-- SCOPED JARS-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <configuration>
                <executable>true</executable>
            </configuration>
        </plugin>
    </plugins>
        <finalName>${project.artifactId}</finalName>
</build>

templates/index.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:include="fragments/headerinc :: head">
    <title>Demo App</title>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div class="container-fluid">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                        data-toggle="collapse">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img style="width: 75px;" th:src="@{~/images/logo.png}"/>My APP</a>
            </div>
            <div id="navbar5" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Journal</a></li>
                    <li><a href="#">Etc</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

templates/fragments/headerinc.html

<!DOCTYPE HTML>
<html  xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:fragment="head">
    <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
    <link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"
          th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}"
          rel="stylesheet" media="screen" />
    <link href="../css/styles.css"  th:href="@{/css/styles.css}"
          type="text/css" rel="stylesheet" media="all"/>
</head>
<body>
</body>
</html>

Any suggestions would be greatly appreciated!

Upvotes: 1

Views: 1080

Answers (1)

john sooraj xavier
john sooraj xavier

Reputation: 31

In case of using Webjars by using maven dependency, Your controller request method should specify that value even if the uri is just a /, like below.

@RequestMapping(value = "/")
public String index() {
    return "welcome";
}

But if you are putting all CSS and JS in the resources/static folder, spring will automatically send corresponding response.

Upvotes: 1

Related Questions