Springboot - 资源解释为样式表，但使用 MIME 类型 text/html 传输
Posted
技术标签:
【中文标题】Springboot - 资源解释为样式表，但使用 MIME 类型 text/html 传输【英文标题】：Springboot - Resource interpreted as Stylesheet but transferred with MIME type text/html 【发布时间】：2017-10-12 02:13:27 【问题描述】：好的，这里完全被难住了。我的启动应用程序没有提供任何静态资源。未应用 CSS，未加载图像。还没有安全性，所以我认为这不是问题。
检查我得到的控制台输出
Resource interpreted as Stylesheet but transferred with MIME type text/html
一切都是 200
但是，如果您查看响应...那不是引导程序
我相信我使用了正确的默认文件结构
代码如下：
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>
模板/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>
模板/片段/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>
任何建议将不胜感激！
【问题讨论】：
你有added a resource handler 的/webjars/** 模式吗？
它错误地提供了所有静态内容。例如 localhost/css/styles.css 不会给出 404 而是呈现 index.html。
你是怎么解决这个问题的？
【参考方案1】：
如果通过使用 maven 依赖项来使用 Webjars，即使 uri 只是一个 /，您的控制器请求方法也应该指定该 value ，如下所示。
@RequestMapping(value = "/")
public String index()
return "welcome";
但是如果你将所有 CSS 和 JS 放在 resources/static 文件夹中，spring 会自动发送相应的响应。
【讨论】：
以上是关于Springboot - 资源解释为样式表，但使用 MIME 类型 text/html 传输的主要内容，如果未能解决你的问题，请参考以下文章
Wordpress 样式表问题：资源解释为样式表，但使用 MIME 类型传输
Wordpress 资源解释为样式表，但使用 mime 类型 text/html 传输
Flask：资源解释为样式表，但使用 MIME 类型 text/html 传输