SpringMVC 过滤器 Filter 解决fetch 跨域问题

最近考试太忙，很久没有更新了。换换脑子放松一下继续搞搞JAVA。而且抽时间出来学习的react 也刚刚上手，不过遇到了fetch请求跨域的问题.

最近的前端发展太块，进而大大影响着后台人员。作为一名后台人员是有必要学习一下前端框架和技术栈的。

现今出现的主流前端框架有AngularJS，Angular2，React，Vue。出现这么多框架的原因是（前后端彻底分离？）我猜的吧。 我尝试了angularJS做过几个页面之后，认为angularJS 已经走向末路,至于原因自行百度。 谷歌爸爸对angularJS 做了彻底的重构进而有了angular2.感兴趣的朋友可以尝试学习一下。 而我最终决定先试一试react。学习react所需的前置知识需要（HTML5,CSS3,ES6语法）

废话说了这么多,正真的前后端分离是必须有跨域请求的。 所以我们介绍一下CORS协议

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

所以我们只要在服务器端的http头中设置Access-Control-Allow-Origin设置可访问的源站点就能让前端正常使用fetch了。

如果服务端不配置这个http头的话，浏览器会报 No 'Access-Control-Allow-Origin' header is present on the request resource这个错误。

所以我们的解决办法就是在springMVC中添加CORS协议过滤器:

如图所示，继续在web.xml中配置这个过滤器即可

然后重新运行工程，使用fetch发送请求：

这样在控制台就能打印出所需要的json数据完成了跨域请求了，所以关键还是需要服务器的配合才能完成这项工作。