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

前端 JavaScript 调用 Spring Boot 嵌入式服务器,本质是通过 HTTP 请求与后端暴露的接口进行通信。Spring Boot 使用嵌入式服务器(如 Tomcat、Jetty)启动应用后,会监听指定端口,提供 Web 服务。前端可通过浏览器发起请求来调用这些接口。
在 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 访问。
立即学习“前端免费学习笔记(深入)”;
前端 JavaScript 可使用原生 fetch API 或第三方库如 axios 调用后端接口。
使用 fetch 获取数据:fetch('http://localhost:8080/api/hello')<br> .then(response => response.text())<br> .then(data => console.log(data));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));前端若运行在不同域名或端口(如 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>}创建配置类:
@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>}检查 application.properties 或 application.yml 中的服务器配置:
server.port=8080<br>server.address=localhost
确保没有防火墙或网络设置阻止访问该端口。
基本上就这些。只要后端接口正常运行,前端能发送 HTTP 请求并处理响应,就能实现调用。关键是保证接口可达、CORS 配置正确、数据格式匹配。不复杂但容易忽略细节。
以上就是前端JS调用SpringBoot嵌入式服务器的实现方法的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号