Spring Boot整合React遇MIME类型错误及404问题求助

1. 检查静态资源路径配置 #

Spring Boot默认从src/main/resources/static或src/main/resources/public加载静态资源。得确保用Parcel打包后的React产物（index.js、index.html这类文件）放在这两个目录下，或者在Spring Boot里自定义静态资源映射：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/react/**")
                .addResourceLocations("classpath:/static/react/");
    }
}

如果你的React打包文件放在static/react下，这么配置后访问/react就能正确映射到静态资源。

2. 修正Parcel打包配置 #

得让Parcel的打包输出目录直接指向Spring Boot的静态资源目录。在项目根目录的package.json里这么配置：

{
  "scripts": {
    "build": "parcel build src/index.html --dist-dir src/main/resources/static/react"
  }
}

执行npm run build后，打包产物会直接输出到Spring Boot的静态资源目录，省得手动复制文件出错。

3. 检查HTML中index.js的引用路径 #

在React的入口HTML文件里，index.js的引用路径必须正确。比如打包后文件在/react/index.js，那HTML里得这么写：

<script type="module" src="/react/index.js"></script>

路径写错的话，Spring Boot找不到资源会返回404的JSON响应，浏览器会把它识别成application/json类型，触发MIME错误。

4. 验证Spring Boot的路由配置 #

要确认/react路径没被后端Controller拦截。要是有Controller映射了/react，会优先返回后端的JSON响应，静态资源就加载不了。检查下有没有类似代码：

@GetMapping("/react")
public ResponseEntity<?> someMethod() {
    // 这里返回JSON，会导致静态资源加载失败
}

有的话要么修改Controller的路径，要么调整静态资源的映射优先级。

5. 清理缓存并重新打包 #

有时候浏览器缓存或者旧的打包文件会出问题，按下面步骤操作：

• 删除Parcel的缓存目录.parcel-cache
• 删除Spring Boot的target目录
• 重新执行npm run build和mvn clean package（用Gradle的话就执行clean build）
• 重启Spring Boot应用

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