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);}@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解决跨域方法）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。