?

說到與前端通信，明白人都知道這章肯定會寫兩部分的東西啦。

?

關于后臺

?

①首先回顧前文，上一章環境搭建如圖：

?

?

②我們在maven.example.controller下添加一個文件，并附上如圖代碼：

?

③：上面又多出了兩個注解，分別是@RestController、@RequestMapping。他們有著什么含義呢？

?

@RestController： 它是作為一個Web?@Controller存在的，用于專門接收傳入的Web請求。

@RequestMapping： 它提供了“路由”信息。 如圖它會告訴Spring，任何帶有/ path的HTTP請求都會映射到home方法上去。

?

④： 對應的home方法還能接收HTTP傳輸的數據，前提是要保持接收與發送數據的類型是對應的，相關我們會在本章節后面補充上

?

⑤： 啟動服務，開始編寫前端代碼。

?

---

?

關于前端

?

前提：我們這里使用的是fetch，而不是XMLHttpRequest，fetch細的知識點的話在springboot框架篇章里不會細說，會放到之后的前端篇章里說。

?

①：相比XMLHttpRequest， 我相信fetch更代表著未來。不過fetch仍有一些缺點，其中一個就是對于舊版本的瀏覽器， 我們需要配置fetch-polyfill才能使用fetch。以下是支持原生fetch各個瀏覽器的最低版本圖：

?

②：話不多說，這里開始上代碼吧：

fetch('http://localhost:8080/index/home', {method:'post',}).then(response => response.text()).then(data => {alert(data)}).catch(function(e){alert("error:" + e);})

?

?

③：以上我并沒有傳輸Data到后臺，關于傳輸數據前后端的對應性，我們要放在本章的下一節來講。 另外關于以上代碼，需要注意以下部分：

因為我本地現在暫時沒有配反響代理， 所以URL地址為如此， 但如果配備了反向代理， URL地址應寫為 '/index/home'。

?

④：運行程序，進行通信后，我們會發現瀏覽器曝出了跨域的問題：

?

?

⑤：我本地的前端框架用的是react，關于編譯，現在用的是官方提供的webpack配置文件，還沒有改著用自己寫的，所以關于反向代理的處理，我就先寫在springboot這邊，讓我們重新轉回springboot。

?

---

?

再回后臺

?

①：關于跨域的處理，我部署為支持所有路由，而非設置單個路由，單個路由設置需要用@CrossOrigin標簽。這里通過用自定義addCorsMappings（CorsRegistry）方法注冊WebMvcConfigurer bean來定義全局CORS配置，更改App.java代碼即可：

package maven.example;import org.springframework.boot.*; import org.springframework.boot.autoconfigure.*; import org.springframework.context.annotation.Bean; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@SpringBootApplication public class App {public static void main(String[] args) throws Exception {SpringApplication.run(App.class, args);}@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {public void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**");}};}}

?

?

②： 重新運行新的jar，再刷新網頁，會發現通信已成功。

下一章為關于前后端通信數據處理方式

轉載于:https://www.cnblogs.com/tianshu/p/9128952.html

總結

以上是生活随笔為你收集整理的Springboot第二篇：与前端fetch通信（附springboot解决跨域方法）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。