前端JS调用SpringBoot嵌入式服务器的实现方法

前端通过HTTP请求调用Spring Boot嵌入式服务器暴露的RESTful接口，使用fetch或axios发送GET、POST请求获取或提交数据，需配置CORS解决跨域问题，确保后端接口可达及数据格式正确。

前端 JavaScript 调用 Spring Boot 嵌入式服务器，本质是通过 HTTP 请求与后端暴露的接口进行通信。Spring Boot 使用嵌入式服务器（如 Tomcat、Jetty）启动应用后，会监听指定端口，提供 Web 服务。前端可通过浏览器发起请求来调用这些接口。

1. 后端暴露 RESTful 接口

在 Spring Boot 项目中，使用 @RestController 注解创建可被前端访问的接口。

@RestController
public class ApiController {
    @GetMapping("/api/hello")
    public String hello() {
        return "Hello from Spring Boot!";
    }

    @PostMapping("/api/data")
    public Map postData(@RequestBody Map payload) {
        Map response = new HashMap<>();
        response.put("message", "Received data");
        response.put("data", payload);
        return response;
    }
}

启动后，该接口默认可通过 http://localhost:8080/api/hello 访问。

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

2. 前端使用 fetch 或 axios 发起请求

前端 JavaScript 可使用原生 fetch API 或第三方库如 axios 调用后端接口。

fetch('http://localhost:8080/api/hello')
  .then(response => response.text())
  .then(data => console.log(data));

fetch('http://localhost:8080/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice', age: 25 })
})
  .then(response => response.json())
  .then(data => console.log(data));

3. 处理跨域问题（CORS）

前端若运行在不同域名或端口（如 http://localhost:3000），会因同源策略导致请求被拦截。需在 Spring Boot 中启用 CORS 支持。

站长俱乐部购物系统

功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类

下载

@CrossOrigin(origins = "http://localhost:3000")
@GetMapping("/api/hello")
public String hello() {
    return "Hello from Spring Boot!";
}

创建配置类：

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                       .allowedOrigins("http://localhost:3000")
                       .allowedMethods("GET", "POST", "PUT", "DELETE");
            }
        };
    }
}

4. 确保服务正确启动并可访问

检查 application.properties 或 application.yml 中的服务器配置：

server.port=8080
server.address=localhost

确保没有防火墙或网络设置阻止访问该端口。

基本上就这些。只要后端接口正常运行，前端能发送 HTTP 请求并处理响应，就能实现调用。关键是保证接口可达、CORS 配置正确、数据格式匹配。不复杂但容易忽略细节。