四种JS跨域解决方案及其实现原理

当进行前后端分离开发时，可能会预见JS跨域请求的问题

经过查找实践，有如下的四种解决方法：

1、Jsonp

     JSONP 是 JSON 的一种使用模式，可以解决主流浏览器的跨域数据访问问题。

    实际开发中代码如下：

layui.use(['form','jquery'], function (form,$) {
    //监听提交
    form.on('submit(login)', function () {
        //layer.msg($('#login_form').serialize());
        $.post("http://localhost:8080/rbac-rest-service/rbac/account/login",
            $('#login_form').serialize(),
            function (data) {
                //alert(data.code + data.message);
                if (data.code == 200) {
                    layui.data('test',{
                        key : 'id'
                        ,value : data.data.userid
                    })
                    window.location.href = "indexModify.html";
                }
            },
            "JSONP"
        );
        return false;
    });
});

1.1 JSONP的原理

在使用Ajax去处理请求时，原则上是不允许跨域的，也就是说，请求必须是同源的信息。什么是同源呢？同源指的是：同协议，同域名和同端口。基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。那如果我们需要去请求不同源的内容，也就是如何去处理跨域请求呢？

假如在http://localhost/8080上我们有一个前端页面，在http://localhost/80上有一个JavaWeb项目，我们可以在JavaWeb把我们需要的数据封装成Json显示在80上。而8080根据js的某些允许跨域的属性，去访问http://localhost/80中的json,这个时候8080其实定义了一个js方法，在80上把json封装到js方法的入参中，并以调用的形式去实现，这样在8080上就可以取到80的数据了。

具体原理看此篇博客，写的很好，就不重造轮子了。

http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html

2-3 序幕

下面的两个方法是Spring中解决跨域请求的。事实上，不允许跨域的基本原因是http请求头中没有允许跨域有关的参数。Spring中解决跨域请求的原理就是在拦截器中拦截请求，请在Http请求头添加允许跨域的字段。原理如下，讲解的也非常清晰，重复造轮子有罪https://www.cnblogs.com/softidea/p/6108066.html

2 . SpringMVC的配置文件中加入配置

<mvc:cors>
  <mvc:mapping path="/**" allowed-origins="*" allowed-methods="*"/>
</mvc:cors>

这里需要注意的是 allowed-origins="*" 只是允许跨域，但是只支持跨域的方法为get，所以我们需要配置跨域的方法 allowed-methods="*" 使得所有的HttpMethod均可以支持跨域

3.  使用注解

在service层对应的方法上加入 @CrossOrigin(origins = "*", maxAge = 3600) ,这里要强调的是springMVC的版本要在4.2或以上版本才支持@CrossOrigin

@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping(value="/findMune/{id}",method = RequestMethod.GET)
@ApiOperation("查找对应的菜单id")
public Result selectMuneId(@PathVariable Integer id){
  return ResultGenerator.genSuccessResult(accountService.selectMenuThingsByUserID(id));

4.web-xml中配置过滤器：

参考资料https://segmentfault.com/a/1190000009512081