JSP Web应用CSS被识别为HTML未生效，求排查原因

我有一个基于index.jsp的Web应用，部署在Apache Tomcat 11.0.0上，用NetBeans IDE创建。给页面添加CSS样式时，浏览器将CSS文件识别为HTML，导致样式无法生效。

已检查Tomcat配置的web.xml，其中MIME映射设置正常，CSS文件存放在webapp目录下的css文件夹中。

JSP代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@page import="java.util.List"%>
<%@page import="models.YearlyInstructorStatistic"%>
<html>
<head>
    <title>Skischool Instructor Statistics</title>
    <link rel="stylesheet" type="text/css" href="css/mainstyle.css">
</head>
    <body>
        <h1>Skischool Instructor Statistics</h1>

        <form action="SkiSchoolReportWebApp" method="get">
            <label for="listSelection">Choose an instructor by Id number (0-39)!</label>
            <input type="number" id="listSelection" name="listSelection" min="0" max="39" required>
            <input type="submit" value="Submit">
        </form>

        <table>
            <c:choose>
                <c:when test="${not empty statistics}">
                    <tr>
                        <th colspan="4">${statistics[0].lastName} ${statistics[0].firstName}</th>
                    </tr>
                </c:when>
                <c:otherwise>
                    <tr>
                        <th colspan="4">Name not found!</th>
                    </tr>
                </c:otherwise>
            </c:choose>
            <tr>
                <th>Season</th>
                <th>Lesson Count</th>
                <th>Hours Worked</th>
                <th>Average Student Age</th>
            </tr>
            <c:choose>
                <c:when test="${not empty statistics}">
                    <c:forEach var="statistic" items="${statistics}">
                        <tr>
                            <td>${statistic.season}</td>
                            <td>${statistic.lessonCount}</td>
                            <td>${statistic.hoursWorked}</td>
                            <td>${statistic.averageStudentAge}</td>
                        </tr>
                    </c:forEach>
                </c:when>
                <c:otherwise>
                    <tr>
                        <td colspan="4">No statistics available for this instructor!</td>
                    </tr>
                </c:otherwise>
            </c:choose> 
    </body>
</html>

CSS代码如下：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

table{
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

th, td{
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #006699;
    color: white;
    font-weight: bold;
}

tr:nth-child(even){
    background-color: #f9f9f9;
}

tr:hover{
    background-color: #e6f7ff;
}

th[colspan="4"]{
    font-size: 1.2em;
    padding: 15px;
    background-color: #004d66;
    color: white;
}

浏览器开发者工具显示CSS已加载，但类型为HTML而非CSS，样式未应用。请问可能是什么原因？哪里操作有误？

• CSS文件路径错误：当前使用的相对路径css/mainstyle.css可能因应用上下文路径导致无法正确定位文件。建议改用绝对路径，通过JSP内置对象获取应用上下文路径：

  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mainstyle.css">
  

  这能确保无论应用部署在哪个上下文路径下，都能准确找到CSS文件。

• NetBeans部署同步异常：NetBeans在部署项目时，可能未将css文件夹或CSS文件同步到Tomcat的部署目录（通常为Tomcat/webapps/你的应用名/css/）。手动检查该目录，确认mainstyle.css是否存在且内容正确；若缺失，手动复制文件，或在NetBeans中执行清理、构建、重新部署操作。

• 自定义Filter拦截静态资源：如果项目中存在自定义Servlet Filter，可能拦截了CSS等静态资源请求，并错误地将响应的Content-Type设置为text/html。检查Filter配置，确保静态资源（如.css、.js）被排除在拦截范围之外。

• 项目web.xml覆盖全局MIME配置：虽然Tomcat全局web.xml的MIME映射正常，但项目自身WEB-INF/web.xml可能存在错误配置，比如将.css映射为text/html。检查项目web.xml，确保CSS的MIME映射正确：

  <mime-mapping>
      <extension>css</extension>
      <mime-type>text/css</mime-type>
  </mime-mapping>
  

• 浏览器缓存残留：浏览器可能缓存了之前错误的响应（将CSS识别为HTML）。按Ctrl+Shift+R强制刷新页面，或清除浏览器缓存后重新测试。

内容的提问来源于stack exchange，提问作者Thinchance