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，再刷新网页，会发现通信已成功。

下一章为关于前后端通信数据处理方式