首页
学习
活动
专区
工具
TVP
发布

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数据完成了跨域请求了,所以关键还是需要服务器的配合才能完成这项工作。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180127G02WCC00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券