springboot实现CORS前后端分离的跨域访问

springboot实现CORS前后端分离的跨域访问

参考文章:http://www.ruanyifeng.com/blog/2016/04/cors.html
写的很详细,从根上讲解跨域问题.

什么是跨域

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。其实当目前项目的协议、域名、端口不同的时候,浏览器是拒绝接受另一个项目的数据的.
注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

跨域的现象

例如当我前端的项目的当前页面的路径是http://127.0.0.1:3000/main时,我在当前的页面下发出一个ajax请求,http://127.0.0.1:8003/bi/userInfo/getUserInfo,这个请求和当前项目的端口是不同的,一个3000一个8003,所以就出现了跨域问题.
跨域问题不会无法发出请求,而是请求发出后,目标项目的数据浏览器是拒绝接收的,所以就会出现ajax跳转到error:function(data).同时浏览器报错:

但是后端项目的方法其实是执行的:

所以:跨域的现象就是,后端可以访问,但是,无法返回数据.

解决

跨域限制访问，其实是浏览器的限制。所以只需要在后端进行设置即可.整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
使用springboot已经集成了cors使用很方便

@Configuration
public class WebConfig extends WebMvcConfigurationSupport {
        /*
        * addMapping拦截跨域访问的路径
        * Origins允许跨域的ip地址,*表示所有的地址,为了安全,可以写固定前端的ip
        * Methods允许跨域的方法.
        * */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/bi/**")
                .allowedMethods("*")
                .allowedOrigins("*")
                .allowedHeaders("*");
        super.addCorsMappings(registry);
    }
}