前端三件套+springboot后端連通嘗試

本文承接自跨域請求問題淺解-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);}};}
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/95714.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/95714.shtml
英文地址，請注明出處：http://en.pswp.cn/web/95714.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！