报错:XMLHttpRequest cannot load http://127.0.0.1:8080/detail/all. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.
场景:本人自己兼顾前后端,做一个小案例。后端使用springboot+mybatis框架搭建的,前端使用vue2.0+axios,在前端用axios去访问后端的时候出现了上面所说的错误,大致意思就是禁止跨域访问,于是查阅了一些资料,在这里分别给出前端、后端的解决办法!!
首先我门要知道什么是跨域:
跨域是指 不同域名之间相互访问。跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。
也就是如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容
如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。
什么是同一个域?
同一协议,同一ip,同一端口,三同中有一不同就产生了跨域。
解决办法:
后端解决跨域问题:
后端解决就比较简单了。例如我用的springboot,只用在Controller类上添加一个“@CrossOrigin“注解就可以实现对当前controller 的跨
域 访问了,当然这个标签也可以加到方法上。
前端解决跨域:
前边也说了,跨域是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。
解决:
方法一:搞一个node 服务器做代理,发出请求到node 服务器,node服务器转发到后端就可以绕过跨域问题。
方法二:据说使用jsonp可以解决( dataType: 'JSONP',)
参考博客:http://www.jianshu.com/p/b95813068827
PS:感觉前端解决跨域的资料挺多的,反正我都没有实践过,我是用后端来解决的,然后提出一点疑问,希望大神们可以给我答复,通过这些方式解决跨域会不会存在什么安全性问题?(后续查到资料会持续更新)