React+SpringBoot部署Heroku后调用数据库报Failed To Fetch错误排查

1. application.properties在.gitignore中是否需要移除？ #

不需要直接移除，正确处理方式如下：

• 本地的application.properties继续留在.gitignore里，避免本地开发配置泄露到代码仓库
• 在Heroku的**配置变量（Config Vars）**中设置数据库连接参数（比如SPRING_DATASOURCE_URL、SPRING_DATASOURCE_USERNAME、SPRING_DATASOURCE_PASSWORD），SpringBoot会自动读取这些环境变量，覆盖本地配置
• 如果一定要把application.properties提交到仓库，要改成占位符形式，让Heroku用环境变量填充，示例：

  spring.datasource.url=${SPRING_DATASOURCE_URL}
  spring.datasource.username=${SPRING_DATASOURCE_USERNAME}
  spring.datasource.password=${SPRING_DATASOURCE_PASSWORD}
  server.port=${PORT:8080}
  

  这样本地开发可以用自己的配置，Heroku部署时自动用环境变量替换

2. 排查Failed To Fetch/Postman无响应的步骤 #

• 查看Heroku后端日志：执行命令heroku logs --tail实时刷新日志，重点关注数据库连接报错、端口绑定失败、CORS相关错误，这些是最常见的问题根源
• 确认后端启动状态：登录Heroku控制台查看应用的dyno状态，确保web dyno处于Running状态；如果有健康检查接口（比如/actuator/health），直接访问该接口的完整URL，验证是否返回200状态码
• 检查CORS配置：前端与后端域名不同，必须在SpringBoot中配置允许前端域名访问，示例代码：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .allowedOrigins("你的前端Heroku完整域名")
                  .allowedMethods("GET", "POST", "PUT", "DELETE")
                  .allowedHeaders("*");
      }
  }
  

• 验证数据库连接：用Heroku提供的数据库凭证，本地使用MySQL客户端测试连接，确认账号、密码、地址均正确；如果日志中出现Could not get JDBC Connection，说明连接配置有误
• 端口配置检查：Heroku会动态分配端口，不能硬编码8080，必须配置为server.port=${PORT:8080}，让SpringBoot读取Heroku的PORT环境变量
• Postman测试细节：直接使用后端的完整Heroku URL调用接口（比如https://你的后端域名.herokuapp.com/api/users），根据Postman的错误提示排查：超时说明后端未正常启动，404说明接口路径错误，500说明后端内部报错，对应去日志中查找具体信息

3. 验证配置是否正确的方法 #

适配Heroku的标准application.properties配置 #

# 数据源核心配置
spring.datasource.url=${SPRING_DATASOURCE_URL}
spring.datasource.username=${SPRING_DATASOURCE_USERNAME}
spring.datasource.password=${SPRING_DATASOURCE_PASSWORD}
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# JPA/Hibernate配置（若使用JPA）
spring.jpa.hibernate.ddl-auto=none # 生产环境禁止使用create/update，避免数据丢失
spring.jpa.show-sql=false
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect

# 端口配置
server.port=${PORT:8080}

确认Heroku配置变量 #

• 登录Heroku控制台，进入应用的Settings页面，检查Config Vars中的参数：
  • SPRING_DATASOURCE_URL需与Heroku提供的数据库URL一致（格式为jdbc:mysql://<host>:<port>/<database>?useSSL=true&requireSSL=false&serverTimezone=UTC）
  • SPRING_DATASOURCE_USERNAME和SPRING_DATASOURCE_PASSWORD需与Heroku提供的凭证完全匹配

前端调用代码注意事项 #

• 不要硬编码后端URL，使用环境变量：在React的.env文件中添加REACT_APP_API_URL=https://你的后端域名.herokuapp.com/api，调用时用process.env.REACT_APP_API_URL拼接接口路径
• 确保请求方法、路径与后端接口完全对应，比如后端为GET /api/users，前端需写fetch(${process.env.REACT_APP_API_URL}/users)

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