SpringBoot跨域 Jsonp和Cors

栏目: Json · 发布时间: 4年前

内容简介:有一次我的项目中采用了前后端分离的模式,引起了跨域问题,本文将介绍我所采用的跨域解决方法。首先要了解产生跨域的本质,也就是同源策略的限制,源是指域名、端口号、协议,有一者不相同将被浏览器拒绝接受响应信息,(请求可以发送出去,但是浏览器不接受响应)。jsonp的原理的 src="" 属性不受同源策略的限制,动态创建一个callback回调函数,服务器调用回调函数把数据放进去,具体的细节打算以后做一个专门讲解。

有一次我的项目中采用了前后端分离的模式,引起了跨域问题,本文将介绍我所采用的跨域解决方法。

首先要了解产生跨域的本质,也就是同源策略的限制,源是指域名、端口号、协议,有一者不相同将被浏览器拒绝接受响应信息,(请求可以发送出去,但是浏览器不接受响应)。

解决方法:

1. jsonp

jsonp的原理的 src="" 属性不受同源策略的限制,动态创建一个callback回调函数,服务器调用回调函数把数据放进去,具体的细节打算以后做一个专门讲解。

这里给一个模版:

$.ajax({
         type: "get",               //jsonp只能使用get
         async: false,
         url: ""
         dataType: "jsonp",
         jsonp: "callback",        
         jsonpCallback:"message",       //注意这里给回调函数起的名字
             success: function(json){
             
            }
        })
复制代码

如果这里你的回调函数起名为message,那么你在后端返回json的时候,也要注意在最外面包一层message{}。

这里jsonp的确定也可以明显的看出,只支持get请求,原因就是因为通过src=“”发送请求,所以可以知道是url传参。

那么jsonp的好处是什么呢,兼容性,几乎所有浏览器都支持(包括一些版本比较老的),不需要XMLHttpRequest或ActiveX的支持。

2. cors

又称跨域访问,浏览器将cors请求分为简单请求和非简单请求,因为本文主要讲解具体的方法,所以关于细节部分有兴趣可以去看其他博客或者我以后再做一篇具体的讲解(和jsonp一起)。在springboot中,官方已经提供了支持。直接贴代码:

方式一:全局定义

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        List<String> list = new ArrayList<>();
        list.add("*");
        corsConfiguration.setAllowedOrigins(list);
        /*
        // 请求常用的三种配置,*代表允许所有,当时你也可以自定义属性
        (比如header只能带什么,只能是post方式等等)
        */
        corsConfiguration.addAllowedOrigin("*");    //支持的源
        corsConfiguration.addAllowedHeader("*");    //header限制
        corsConfiguration.addAllowedMethod("*");    //支持方法
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source
            = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}
复制代码

方式二:局部定义

@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "",methods = {})
复制代码

直接在需要跨域的方法上添加注解,不过我没试过,有兴趣或者有这种方式需求的朋友可以尝试一下。


以上所述就是小编给大家介绍的《SpringBoot跨域 Jsonp和Cors》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Node.js实战

Node.js实战

[美] Mike Cantelon、[美] TJ Holowaychuk、[美] Nathan Rajlich / 吴海星 / 人民邮电出版社 / 2014-5 / 69.00元

服务器端JavaScript?没错。Node.js是一个JavaScript服务器,支持可伸缩的高性能Web应用。借助异步I/O,这个服务器可以同时做很多事情,能满足聊天、游戏和实时统计等应用的需求。并且既然是JavaScript,那你就可以全栈使用一种语言。 本书向读者展示了如何构建产品级应用,对关键概念的介绍清晰明了,贴近实际的例子,涵盖从安装到部署的各个环节,是一部讲解与实践并重的优秀......一起来看看 《Node.js实战》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试