Spring Boot中index.html无法加载CSS与图片问题求助

看起来你遇到的核心问题是Spring Boot的静态资源映射规则和IntelliJ直接预览静态文件的逻辑不一样，导致CSS和图片无法正确加载，同时触发了MIME类型不匹配的错误。下面一步步帮你解决：

问题原因分析 #

• IntelliJ直接预览index.html时，是把它当作本地静态文件处理的，相对路径css/style.css会直接从当前文件所在目录的同级css文件夹找资源，所以能正常加载。
• 但运行Spring Boot应用时，所有请求都会先经过DispatcherServlet，而你所有控制器都是@RestController，没有配置静态资源的映射规则。当请求http://localhost:8080/css/style.css时，Spring找不到对应的处理方法，会返回一个JSON格式的404响应，这就是浏览器提示MIME类型（application/json）不匹配的原因。

解决方案 #

1. 修正静态资源的引用路径 #

把index.html里的CSS和图片引用改成根路径相对写法（前面加/），这样Spring Boot会从默认的静态资源目录去查找：

<!-- CSS引用修改后 -->
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<link rel="stylesheet" type="text/css" href="/css/body.css"/>
<link rel="stylesheet" type="text/css" href="/css/header.css"/>
<link rel="stylesheet" type="text/css" href="/css/section_one.css"/>
<link rel="stylesheet" type="text/css" href="/css/section_two.css"/>

<!-- 图片引用修改后 -->
<img src="/images/android-device-mock.svg" alt="Android app mock up" height="700" width="300" />

2. 确保静态资源存放位置正确 #

Spring Boot默认会从以下目录加载静态资源（优先级从高到低）：

• src/main/resources/static
• src/main/resources/public
• src/main/resources/resources
• src/main/resources/META-INF/resources

你需要把css和images文件夹放到src/main/resources/static目录下，目录结构应该是这样：

src/
└── main/
    └── resources/
        ├── static/
        │   ├── css/
        │   │   ├── style.css
        │   │   ├── body.css
        │   │   └── ...
        │   ├── images/
        │   │   └── android-device-mock.svg
        │   └── index.html
        └── application.properties

3. 处理Cookie警告 #

这个警告是因为浏览器中存在的JSESSIONID Cookie协议（比如HTTPS）和当前访问Spring Boot的协议（HTTP）不匹配，或者Cookie的跨站属性设置问题。解决方法：

• 清理浏览器的Cookie，重新访问http://localhost:8080/
• 如果后续部署到HTTPS环境，确保Spring Boot配置HTTPS，保持协议一致

完成以上步骤后，重启Spring Boot应用，访问http://localhost:8080/应该就能正常加载CSS和图片了。

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