答案：通过Spring Boot Actuator暴露监控端点，前端调用接口实现应用监控。具体步骤包括：1. 添加actuator依赖并配置暴露health、metrics等端点；2. 后端配置CORS允许前端访问/actuator/**路径；3. 前端使用fetch或axios请求健康状态和指标数据；4. 生产环境需通过Security、反向代理或中间层限制访问，避免敏感信息泄露。
前端通过 JavaScript 调用 Spring Boot Actuator 接口来实现应用监控，是一种常见的运维需求。要完成这个功能，需要后端暴露安全的监控端点，前端通过 HTTP 请求获取数据并展示。以下是具体实现步骤：
1. 后端开启并配置 Actuator 端点
确保 Spring Boot 项目中已引入 spring-boot-starter-actuator 依赖，并正确配置允许访问的端点。
- 在 pom.xml 中添加依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
- 在 application.yml 中启用常用端点，如 health、info、metrics 等：
management:
endpoints:
web:
exposure:
include: health,info,metrics,env
endpoint:
health:
show-details: always
这会将关键监控接口暴露在 /actuator 路径下，例如：/actuator/health、/actuator/metrics。
2. 配置跨域（CORS）支持
前端 JS 发起请求属于浏览器跨域场景，需在后端允许来自前端域名的请求。
立即学习“前端免费学习笔记（深入）”；
- 创建一个配置类启用 CORS：
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/actuator/**")
.allowedOrigins("http://localhost:3000") // 前端地址
.allowedMethods("GET")
.allowedHeaders("*");
}
}
根据实际部署情况调整 allowedOrigins 地址。
3. 前端使用 Fetch 或 Axios 调用接口
前端可通过原生 fetch 或 axios 发起 GET 请求获取监控数据。
- 示例：使用 fetch 获取健康状态：
fetch('http://your-springboot-app/actuator/health')
.then(response => response.json())
.then(data => {
console.log('应用状态:', data.status); // 如 UP 或 DOWN
})
.catch(err => console.error('请求失败:', err));
- 获取指标示例（如 JVM 内存）：
fetch('http://your-springboot-app/actuator/metrics/jvm.memory.used')
.then(r => r.json())
.then(data => {
data.measurements.forEach(m => {
console.log(`${m.statistic}: ${m.value}`);
});
});
4. 安全性考虑
生产环境中直接暴露 Actuator 接口存在风险，建议采取以下措施：
- 通过 Spring Security 对 /actuator/** 路径进行权限控制，仅允许管理员访问。
- 避免暴露敏感端点如 env、heapdump，或通过条件配置关闭。
- 使用反向代理（如 Nginx）限制 IP 访问，或结合 JWT 鉴权机制。
- 前端不直接调用生产环境 Actuator，可由中间层 API 代理转发并过滤数据。
基本上就这些。只要后端开放了安全的监控接口，前端就能通过标准 HTTP 请求实时获取应用状态，用于构建简单的监控面板。关键是注意权限和暴露范围，避免信息泄露。
