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

19 篇文章 0 订阅
3 篇文章 0 订阅

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);
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值