当前位置：首页 > news >正文

前端三件套+springboot后端连通尝试

news 2025/9/6 8:50:49

本文承接自跨域请求问题浅解-CSDN博客

后端：

//主启动类
@SpringBootApplication
public class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);}}

//控制类
@RestController
@RequestMapping("/greeting")
public class FirstController {@GetMapping("/data")public Map<String, String> greeting() {return Map.of("message", "Hello World of Spring Boot!");}
}

方式一：前后端同源

前端：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="fetchData">确认</button><div id="content"></div><script>document.getElementById("fetchData").addEventListener("click", function() {fetch("/greeting/data").then(response => response.json()).then(data => {document.getElementById("content").innerHTML =`<p>从后端获得数据: ${data.message}</p>`;// if (data && data.message) {//     document.getElementById("content").innerHTML =//         `<p>从后端获得数据: ${data.message}</p>`;// } else {//     console.error("数据格式不正确:", data);// }})// .catch(error => {//     console.error("请求出错:", error);// })})</script>
</body>
</html>

方式二：使用LIve Server代理

前端：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="fetchData">确认</button><div id="content"></div><script>document.getElementById("fetchData").addEventListener("click", function() {fetch("http://localhost:8080/greeting/data").then(response => response.json()).then(data => {document.getElementById("content").innerHTML =`<p>从后端获得数据: ${data.message}</p>`;// if (data && data.message) {//     document.getElementById("content").innerHTML =//         `<p>从后端获得数据: ${data.message}</p>`;// } else {//     console.error("数据格式不正确:", data);// }})// .catch(error => {//     console.error("请求出错:", error);// })})</script>
</body>
</html>

后端配置 CORS，将其添加到主启动类同一目录下

@Configuration
public class CorsConfig {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://127.0.0.1:5500").allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").allowCredentials(true);}};}
}