Springboot第二篇：與前端fetch通信（附springboot解決跨域方法）

 

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

 

關於后台

 

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

 

 

②我們在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);
    }
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {

            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }

}

 

 

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

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