Spring Data Rest+React项目遇Error 404: bundle.js未找到问题求助

兄弟，我之前跟着类似的Spring+React教程踩过几乎一模一样的坑！咱们一步步来排查解决：

1. 先盯紧bundle.js的生成位置与Spring静态资源规则 #

首先得确认你的bundle.js到底生成在了哪个目录。Spring Boot默认只会从这几个目录加载静态资源：src/main/resources/static、src/main/resources/public、src/main/resources/META-INF/resources。如果你的bundle.js不在这些路径里，Spring自然找不到它。

解决办法有两种：

• 调整Webpack输出路径：修改webpack.config.js，把bundle.js直接输出到Spring的静态资源目录，比如：

  module.exports = {
    // ...其他配置
    output: {
      path: path.resolve(__dirname, 'src/main/resources/static/js'),
      filename: 'bundle.js'
    }
  };
  

• 自定义Spring静态资源映射：在application.properties里添加配置，指定你的bundle.js所在目录：

  spring.web.resources.static-locations=classpath:/static/,file:/你的bundle.js所在绝对路径/
  

2. 检查HTML里bundle.js的引用路径 #

打开你的前端入口index.html，看看引入bundle.js的路径是不是和实际生成的位置匹配。比如如果bundle.js在static/js/bundle.js，那HTML里必须写：

<script src="/js/bundle.js"></script>

要是写成相对路径（比如./bundle.js）或者层级错了，肯定会404。

3. 确认Webpack构建是否真的成功了 #

别光看文件存在，说不定Webpack构建时悄悄报错了！重新跑一遍构建命令（比如npm run build或者webpack --mode development），盯着控制台看有没有语法错误或者路径相关的警告，确保bundle.js是完整生成的。

4. 排查React与Spring Data Rest的API交互 #

虽然你说Spring接口正常，但也要确认React代码里的请求路径对不对。比如你的Spring Data Rest基础路径是/api，那React里的请求得写成fetch('/api/xxx')，不能瞎写路径。

打开浏览器开发者工具（F12）的Network标签，刷新页面看看：有没有API请求失败？请求URL是不是正确？说不定是前端请求路径错了，导致拿不到数据页面空着。

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