前后端交互之解决跨域问题！！！！

报错：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 的跨

域 访问了，当然这个标签也可以加到方法上。

@RequestMapping(value = "/users")@RestController@CrossOriginpublic class UserController {    @Autowired    private UserService userService;    @RequestMapping(method = RequestMethod.POST)    @CrossOrigin    public User create(@RequestBody @Validated User user) {        return userService.create(user);    }   ｝

前端解决跨域：

前边也说了，跨域是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。 
解决： 
方法一：搞一个node 服务器做代理，发出请求到node 服务器，node服务器转发到后端就可以绕过跨域问题。

方法二：据说使用jsonp可以解决（ dataType: 'JSONP',）

参考博客：http://www.jianshu.com/p/b95813068827

PS：感觉前端解决跨域的资料挺多的，反正我都没有实践过，我是用后端来解决的，然后提出一点疑问，希望大神们可以给我答复，通过这些方式解决跨域会不会存在什么安全性问题？（后续查到资料会持续更新）