Springboot第二篇:与前端fetch通信(附springboot解决跨域方法)

时间:2022-08-28 17:10:39

 

说到与前端通信,明白人都知道这章肯定会写两部分的东西啦。

 

关于后台

 

①首先回顾前文,上一章环境搭建如图:

 

Springboot第二篇:与前端fetch通信(附springboot解决跨域方法)

 

②我们在maven.example.controller下添加一个文件,并附上如图代码:

 

Springboot第二篇:与前端fetch通信(附springboot解决跨域方法)

 

③:上面又多出了两个注解,分别是@RestController、@RequestMapping。他们有着什么含义呢?

 

@RestController: 它是作为一个Web @Controller存在的,用于专门接收传入的Web请求。

@RequestMapping: 它提供了“路由”信息。 如图它会告诉Spring,任何带有/ path的HTTP请求都会映射到home方法上去。

 

④: 对应的home方法还能接收HTTP传输的数据,前提是要保持接收与发送数据的类型是对应的,相关我们会在本章节后面补充上

 

⑤: 启动服务,开始编写前端代码。

 


 

关于前端

 

前提:我们这里使用的是fetch,而不是XMLHttpRequest,fetch细的知识点的话在springboot框架篇章里不会细说,会放到之后的前端篇章里说。

 

①:相比XMLHttpRequest, 我相信fetch更代表着未来。不过fetch仍有一些缺点,其中一个就是对于旧版本的浏览器, 我们需要配置fetch-polyfill才能使用fetch。以下是支持原生fetch各个浏览器的最低版本图:

Springboot第二篇:与前端fetch通信(附springboot解决跨域方法)

 

②:话不多说,这里开始上代码吧:

 

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

 

③:以上我并没有传输Data到后台,关于传输数据前后端的对应性,我们要放在本章的下一节来讲。 另外关于以上代码,需要注意以下部分:

Springboot第二篇:与前端fetch通信(附springboot解决跨域方法)

因为我本地现在暂时没有配反响代理, 所以URL地址为如此, 但如果配备了反向代理, URL地址应写为 '/index/home'。

 

④:运行程序,进行通信后,我们会发现浏览器曝出了跨域的问题:

 

Springboot第二篇:与前端fetch通信(附springboot解决跨域方法)

 

⑤:我本地的前端框架用的是react,关于编译,现在用的是官方提供的webpack配置文件,还没有改着用自己写的,所以关于反向代理的处理,我就先写在springboot这边,让我们重新转回springboot。

 


 

再回后台

 

①:关于跨域的处理,我部署为支持所有路由,而非设置单个路由,单个路由设置需要用@CrossOrigin标签。这里通过用自定义addCorsMappings(CorsRegistry)方法注册WebMvcConfigurer bean来定义全局CORS配置,在App.java里添加如下图代码即可:

 Springboot第二篇:与前端fetch通信(附springboot解决跨域方法)

 

②: 重新运行新的jar,再刷新网页,会发现通信已成功。

Springboot第二篇:与前端fetch通信(附springboot解决跨域方法)

Springboot第二篇:与前端fetch通信(附springboot解决跨域方法)

 

今天就暂时到这里啦,关于新加的@Bean标签等释义应会在稍后几天重新添加至该章