答案：通过Spring Boot Actuator暴露健康端点，前端JavaScript定时请求并处理响应，结合CORS配置与UI反馈实现服务状态监控。
在现代前后端分离架构中，前端 JavaScript 应用常需要确认后端 Spring Boot 服务是否正常运行。通过健康检查（Health Check）机制，可以实时判断服务状态，提升系统稳定性与用户体验。本文详细介绍如何使用 JavaScript 前端与 Spring Boot 后端集成健康检查功能。
Spring Boot 暴露健康检查端点
Spring Boot Actuator 提供了开箱即用的健康检查功能，只需简单配置即可启用。
1. 添加依赖：在 build.gradle 文件中加入：
implementation 'org.springframework.boot:spring-boot-starter-actuator'
或在 pom.xml 中添加：
立即学习“Java免费学习笔记（深入）”；
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
2. 配置 application.yml：
启用并暴露健康检查端点：
management:
endpoints:
web:
exposure:
include: health,info
endpoint:
health:
show-details: always
启动应用后，访问 http://localhost:8080/actuator/health 可看到类似响应：
{
"status": "UP",
"components": {
"diskSpace": { "status": "UP" },
"redis": { "status": "UP" }
}
}
JavaScript 发起健康检查请求
前端可通过 fetch API 定期调用健康接口，判断后端状态。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
async function checkBackendHealth() {
try {
const response = await fetch('http://localhost:8080/actuator/health');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (data.status === 'UP') {
console.log('后端服务正常');
return true;
} else {
console.warn('后端服务异常:', data);
return false;
}
} catch (error) {
console.error('无法连接到后端:', error);
return false;
}
}
定期轮询检测：
每 30 秒检查一次服务状态：
setInterval(async () => {
const isHealthy = await checkBackendHealth();
if (!isHealthy) {
alert('后端服务不可用，请检查网络或服务状态！');
}
}, 30000);
处理跨域问题（CORS）
若前端部署在不同域名或端口，需在 Spring Boot 中配置 CORS 支持。
创建配置类：
@Configuration
public class CorsConfig {
@Bean
public CorsWebFilter corsWebFilter() {
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("http://localhost:3000"); // 允许前端地址
config.addAllowedMethod("*");
config.addAllowedHeader("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/actuator/**", config);
return new CorsWebFilter(source);
}
}
或使用 @CrossOrigin 注解直接加在 Controller 上（适用于自定义健康接口）。
增强前端展示与用户提示
将健康状态可视化，提升可维护性。
HTML 状态指示器：<div id="health-status">检查中...</div>更新 UI 的函数：
function updateHealthUI(isHealthy) {
const el = document.getElementById('health-status');
if (isHealthy) {
el.textContent = '✅ 后端服务正常';
el.style.color = 'green';
} else {
el.textContent = '❌ 后端服务异常';
el.style.color = 'red';
}
}
// 调用示例
checkBackendHealth().then(updateHealthUI);
可结合图表、日志或通知系统实现更复杂的监控面板。
基本上就这些。只要后端开启 Actuator，前端定时请求健康接口，再处理好跨域和界面反馈，就能实现稳定可靠的健康检查集成。不复杂但容易忽略细节，比如权限控制或生产环境隐藏敏感信息，建议在正式部署前进一步配置安全策略。
