springboot jsonp实现异步跨域请求

最新推荐文章于 2024-08-04 08:39:25 发布
最新推荐文章于 2024-08-04 08:39:25 发布
阅读量3k 收藏 8
点赞数 3
分类专栏： spring boot 文章标签： springboot jsonp Ajax跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010816545/article/details/80461493
版权

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>
启动后台代码，测试后台能否正常访问

postman测试
postman测试http://10.25.25.92:8081/list 成功返回数据，用浏览器打开Ajax跨域.html，点击点击按钮，发现报错了
这里写图片描述

服务器端解决方案

使用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;
    }

}
测试结果

这里写图片描述
测试成功，源代码下载

工学院
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot 中到底如何解决跨域问题？
m0_67402731的博客
07-29 2171
同源策略是浏览器的一个重要的安全策略，它用于限制一个源的文档或其加载的脚本如何与另外一个源进行交互，它能够隔绝恶意文档，减少被攻击的媒介。如果两个URL的协议、主机名和端口号都是相同的，那么这两个URL就是同源的，否则不同源，不同源的访问就会出现跨域问题，就会出现上面的错误。下表给出了与URLhttp的源进行对比的示例URL结果原因http同源只有路径不同https非同源协议不同http非同源端口号不同http非同源主机名不同也就是说当在http这个网站中向、和。...
解决SpringBoot跨域访问问题的两种详解方法（超详细）
Lorie_chen的博客
12-12 1552
前话 对于前后端分离的项目来说，如果前端项目与后端项目部署在两个不同的域下，那么势必会引起跨域问题的出现。 方法1 JSONP 第一个解决方案就是jsonp，并且以前处理跨域问题基本也是这么处理。 在前端写一个类似于Ajax的异步请求，解析回调函数返回的结果参数，Ajax直接请求普通文件存在跨域无权限访问的问题，不管是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准，但是凡...
spring boot 支持js跨域请求
09-09
spring boot 支持跨域 前台不需要jsonp 请求 正常js即可 spring boot 支持跨域 前台不需要jsonp 请求 正常js即可
ajax 异步请求 jsonp
laokaizzz的专栏
12-02 1155
$.ajax({         type: 'post',         dataType: 'jsonp',         jsonp: 'jsonpCallback',//随便起个名字，返回的时候对应就好         url: ‘xxxxx’,         success: function (rData) {                    },
Spring MVC 教程-ResponseBodyAdvice：对@ResponseBody进行增强
最新发布
smart_an的专栏
08-04 778
这个可以对@ResponseBody进行增强，可以拦截@ResponseBody标注的方法的返回值，对返回值进行统一处理，比如进行加密、包装等操作；比如通过他可以实现统一的返回值。/*** rest接口通用返回值数据结构*///接口状态（成功还是失败）//错误码//提示信息//数据return msg;return success(data, "操作成功!");
JSONP原理详解，关于JSONP是否是异步请求
11-10 120
https://blog.csdn.net/shuidinaozhongyan/article/details/78155543
springboot解决js前端跨域问题，javascript跨域问题解决
weixin_34162695的博客
05-31 299
最近用springboot开发后台接口，但是接口开发好以后，用js请求接口json数据，遇到了烦人的跨域问题，也是找了好久才找到解决方法。下面来讲解下解决步骤。 一，编写Filter过滤器 把下面代码放到你的springboot项目中就可以了 package com.qcl; import org.springframework.stereotype.Component; import jav...
springboot获取原生js请求_springboot解决js前端跨域问题，javascript跨域问题解决
weixin_31924507的博客
01-14 378
最近用springboot开发后台接口，但是接口开发好以后，用js请求接口json数据，遇到了烦人的跨域问题，也是找了好久才找到解决方法。下面来讲解下解决步骤。一，编写Filter过滤器把下面代码放到你的springboot项目中就可以了package com.qcl;import org.springframework.stereotype.Component;import java.io.IO...
springboot跨域session丢失
06-28
JSONP是一种跨域请求的方式，它可以通过在前端页面中添加一个标签来实现跨域请求，从而避免了浏览器不携带Session信息的问题。在Spring Boot中，可以使用@ResponseBody注解来返回JSONP格式的数据。 3. 将Session...
跨域调用简介、Actuator插件使用、SpringBoot Admin使用、SpringCloud简介（Eureka实现）
赵大土的博客
12-05 572
跨域调用处理 什么是跨域 客户端发起异步请求一个服务器，该服务器再异步请求另一服务器 解决 使用jsonp（使用访问回调函数，可以随机生成回调函数名，保证不被劫持，只能通过get请求方式传参） 使用cors协议（不能处理劫持-在跨域异步调用时劫持请求，包装再转发-可以使用VPN专线连接保证不被劫持） cross-origin resource sharing（跨域资源共享） 前后端分离 前端项...
SpringBoot异步请求
m0_67393342的博客
04-08 1645
何为异步请求 在Servlet 3.0之前，Servlet采用Thread-Per-Request的方式处理请求，即每一次Http请求都由某一个线程从头到尾负责处理。如果一个请求需要进行IO操作，比如访问数据库、调用第三方服务接口等，那么其所对应的线程将同步地等待****IO操作完成， 而IO操作是非常慢的，所以此时的线程并不能及时地释放回线程池以供后续使用，在并发量越来越大的情况下，这将带来严重的性能问题。其请求流程大致为： 而在Servlet3.0发布后，提供了一个新特性：异步处理请求。可以先释放容器
Ajax中JSON实现异步请求，JSONP实现跨域异步请求的访问.........
choulian7014的博客
07-17 258
JSON是一个轻量级的数据交换格式基于文本的数据交换方式或者也叫数据描述格式，在JS语言中，一切都是对象所以任何支持的类型都可以通过JSON来表示，比如：字符串、数字、数组、对象等，其中对象表示成键值对数据由逗号分隔，花括号保存对象，方括号保存数组，JSON是JS对象的字符串表示法，它使用文本...
SpringBoot异步处理服务请求
乐闻世界
02-24 2790
一、Callable(Runnable)异步处理请求           @GetMapping("/async") public ResultVO asyncTest() throws Exception { log.info("主线程start"); Callable&lt;ResultVO&gt; result = new Callable&l...
springboot实现jsonp
feinifi的博客
04-28 2367
jsonp是ajax跨域解决方案的一种办法，就是借助标签<script></script>可以实现不同域之间数据请求的一种方式，类似iframe，不受跨域限制，它请求返回之后，会以一种回调的形式调起挂在window对象上的全局方法callback，这里的callback就是我们在url请求中指定的回调函数，参数就是我们请求服务端包装在callback之内的数据。 jsonp的实现，需要前后端配合，不是说前端可以实现，后端也可以实现，他们需要配合才能实现一个完整的js...
彻底解决跨域问题，Spring Boot五种跨域解决方案
2301_77899321的博客
11-29 2026
跨域是指在浏览器中，当一个网页的脚本试图去访问另一个网页的资源时，如果这两个网页的域名、协议或端口不一致，就会发生跨域问题。
Spring-boot系列(14）:jsonp的用法
精确而优雅
07-19 4433
上文粗略的讲了一下jsonp的使用，但是实际过程中很少没有返回的。 springboot支持增强控制器注解，实现选择性返回json或者jsonp。 1.新建jsonp基类 @ControllerAdvice(basePackages = "com.controller") public class Jsonp extends AbstractJsonpResponseBodyAdvi...
SpringBoot对jsonp跨域请求的支持
Lyndon的专栏
08-05 1461
Ajax的写法
SpringBoot框架RESTful接口设置跨域允许
Snow、杨
04-19 3407
跨域 跨域请求是指浏览器脚本文件在发送请求时，脚本所在的服务器和请求的服务器地址不一样。跨域是有浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制， 同源策略：是指协议、域名、端口都要相同，其中有一个不同都会产生跨域 SpringBoot框架RESTful接口解决跨域 此处是有配置文件的方式来解决的 package com.prereadweb.config.cors...
SpringBoot解决跨域的五种方案
quanzhan_King的博客
06-14 2470
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。所以，用最简单的话来说，就是前端可以发请求给服务器，服务器也可以进行响应，只是因为浏览器会对请求头进行判断，所以要么前端设置请求头，要么后端设置请求头。其实无论哪种方案，最终目的都是修改响应头，向响应头中添加浏览器所要求的数据，进而实现跨域。同源，就是咱们域名、端口号、ip、采用的协议都相同，那么我们就是同源的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值