前端 通过 http 请求调用 spring Boot 嵌入式服务器暴露的restful 接口 ，使用 fetch 或axios 发送 GET、POST 请求获取或提交数据，需配置 CORS 解决跨域问题，确保后端接口可达及数据格式正确。
前端 javaScript 调用 spring boot 嵌入式服务器，本质是通过 HTTP 请求与后端暴露的接口进行通信。Spring Boot 使用嵌入式服务器（如 tomcat、jetty）启动应用后，会监听指定 端口 ，提供 Web 服务。前端可通过 浏览器 发起请求来调用这些接口。
1. 后端暴露 RESTful 接口
在 Spring Boot 项目中，使用 @RestController 注解创建可被前端访问的接口。
示例代码：
@RestController<br>public class ApiController {<br> @GetMapping("/api/hello")<br> public String hello() {<br> return "Hello from Spring Boot!";<br>}<br><br> @PostMapping("/api/data")<br> public Map<String, Object> postData(@RequestBody Map<String, Object> payload) {<br> Map<String, Object> response = new HashMap<>();<br> response.put("message", "Received data");<br> response.put("data", payload);<br> return response;<br> }<br>}启动后，该接口默认可通过 http://localhost:8080/api/hello 访问。
立即学习 “ 前端免费学习笔记（深入）”；
2. 前端使用 fetch 或 axios 发起请求
前端 javascript 可使用原生 fetch API 或第三方库如 axios 调用后端接口。
使用 fetch 获取数据：
fetch('http://localhost:8080/api/hello')<br> .then(response => response.text())<br> .then(data => console.log(data));使用 fetch 提交数据：
fetch('http://localhost:8080/api/data', {<br> method: 'POST',<br> headers: { 'Content-Type': 'application/json' },<br> body: json.stringify({name: 'Alice', age: 25})<br>})<br> .then(response => response.json())<br> .then(data => console.log(data));3. 处理跨域问题（CORS）
前端若运行在不同域名或 端口（如 http://localhost:3000），会因同源策略导致请求被拦截。需在 Spring Boot 中启用 CORS 支持。
方式一：在控制器类或方法上添加注解
@CrossOrigin(origins = "http://localhost:3000")<br>@GetMapping("/api/hello")<br>public String hello() {<br> return "Hello from Spring Boot!";<br>}方式二：全局配置 CORS
创建配置类：
@Configuration<br>public class CorsConfig {<br> @Bean<br> public WebMvcConfigurer corsConfigurer() {<br> return new WebMvcConfigurer() {<br> @Override<br> public void addCorsMappings(CorsRegistry registry) {<br> registry.addMapping("/api/**")<br> .allowedOrigins("http://localhost:3000")<br> .allowedMethods("GET", "POST", "PUT", "DELETE");<br> }<br> };<br> }<br>}4. 确保服务正确启动并可访问
检查 application.properties 或 application.yml 中的服务器配置：
server.port=8080<br>server.address=localhost确保没有 防火墙 或网络设置阻止访问该端口。
基本上就这些。只要后端接口正常运行，前端能发送 HTTP 请求并处理响应，就能实现调用。关键是保证接口可达、CORS 配置正确、数据格式匹配。不复杂但容易忽略细节。
