前端JS调用SpringBootActuator监控的实现步骤-js教程-PHP中文网

前端JS调用SpringBootActuator监控的实现步骤

爱谁谁

发布： 2025-11-11 13:48:02

原创

915人浏览过

答案：通过Spring Boot Actuator暴露监控端点，前端调用接口实现应用监控。具体步骤包括：1. 添加actuator依赖并配置暴露health、metrics等端点；2. 后端配置CORS允许前端访问/actuator/**路径；3. 前端使用fetch或axios请求健康状态和指标数据；4. 生产环境需通过Security、反向代理或中间层限制访问，避免敏感信息泄露。

前端js调用springbootactuator监控的实现步骤

前端通过 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 发起请求属于浏览器跨域场景，需在后端允许来自前端域名的请求。

立即学习“前端免费学习笔记（深入）”；

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

创建一个配置类启用 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}`);
    });
  });