欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

springboot jsonp实现异步跨域请求

程序员文章站 2022-07-10 12:11:52
...

springboot jsonp实现异步跨域请求

最近工作中刚好要用jsonp跨域请求获取数据,后台请求是spring boot搭建的,分享给大家,查阅了很多资料,总结了两种方式。

一,jsonp跨域请求数据

前端代码

新建Ajax跨域.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">

    <title>jQuery实现JSONP</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="jquery.jsonp.js"></script>
<script type="text/javascript">


    $(function(){
        $("#btn").click(function(){

            $.ajax({
             //   async : true,
                url : "http://10.25.25.92:8081/list",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型,设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback

                success: function(response,status,xhr){
                    console.log('状态为:' + status + ',状态是:' + xhr.statusText);
                    console.log(response);
                }
            });
        });
    });
</script>
</html>
启动后台代码,测试后台能否正常访问

springboot jsonp实现异步跨域请求
postman测试http://10.25.25.92:8081/list 成功返回数据,用浏览器打开Ajax跨域.html,点击点击按钮,发现报错了
springboot jsonp实现异步跨域请求

服务器端解决方案

使用ResponseBodyAdvice支持jsonp
新建一个配置类

@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
    public JsonpAdvice(){
        super("callback");
    }
}

实现原理参考SpringMVC 使用ResponseBodyAdvice支持jsonp

二,普通Ajax请求实现跨域

其实不用jsonp也可以实现跨域返回json数据,实现原理是在服务器端的filter或者servlet里面添加 response.setHeader(“Access-Control-Allow-Origin”, “*”);
“Access-Control-Allow-Origin”表示允许跨域访问,“*”表示允许所有来源进行跨域访问,这里也可以替换为特定的域名或ip。
很显然,这种方式对非网站拥有人员来说是不能做到的。而且此种方式很容易受到CSRF攻击。
每一个请求都加response.setHeader(“Access-Control-Allow-Origin”, “*”);太麻烦,可以通过过滤器filter实现

前端代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">

    <title>jQuery实现JSONP</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="jquery.jsonp.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){      
             $.ajax({
            dataType: 'json',//不是jsonp
            url: 'http://10.25.25.92:8081/list',
            success: function(data){
                console.log(data);
              }
          });
        });

    });
</script>
</html>
自定义过滤器
// urlPatterns = "/*" ,过滤所有请求,可以根据业务需求拦截部分请求
@WebFilter(urlPatterns = "/*", filterName = "MyFilter")
public class MyFilter implements Filter {
    @Override
    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response= (HttpServletResponse) servletResponse;

        response.setHeader("Access-Control-Allow-Origin", "*");
//        response.setHeader("Access-Control-Allow-Headers", "Authentication");
        response.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE");
//        response.setHeader("Access-Control-Max-Age","3600");
//        response.setHeader("Access-Control-Allow-Credentials","true");

        filterChain.doFilter(servletRequest,servletResponse);
    }
    @Override
    public void init(FilterConfig arg0) throws ServletException {
    }
将自定义过滤器交给spring容器管理

将自定义过滤器交给spring容器管理,也可以添加一些设置

@Configuration
public class MyConfiguration {

    @Bean
    public RemoteIpFilter remoteIpFilter() {
        return new RemoteIpFilter();
    }

    @Bean
    public FilterRegistrationBean testFilterRegistration() {
        FilterRegistrationBean registration = new FilterRegistrationBean();
        registration.setFilter(new MyFilter());//添加过滤器
        registration.addUrlPatterns("/*");//设置过滤路径,/*所有路径
        registration.addInitParameter("name", "alue");//添加默认参数
        registration.setName("MyFilter");//设置优先级
        registration.setOrder(1);//设置优先级
        return registration;
    }

}

测试结果

springboot jsonp实现异步跨域请求
测试成功,源代码下载