前端通过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 获取数据：
fetch('http://localhost:8080/api/hello')
.then(response => response.text())
.then(data => console.log(data));
使用 fetch 提交数据：
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 支持。
方式一：在控制器类或方法上添加注解
@CrossOrigin(origins = "http://localhost:3000")
@GetMapping("/api/hello")
public String hello() {
return "Hello from Spring Boot!";
}
方式二：全局配置 CORS
创建配置类：
@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 配置正确、数据格式匹配。不复杂但容易忽略细节。
以上就是前端JS调用SpringBoot嵌入式服务器的实现方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537301.html
微信扫一扫 
支付宝扫一扫 
