springboot jsonp实现异步跨域请求
2018-05-26 14:18
447 查看
版权声明:原创文章,转载注明出处 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测试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; } }
测试结果
测试成功,源代码下载
相关文章推荐
- SpringBoot下如何配置实现跨域请求?
- Ajax中JSON实现异步请求,JSONP实现跨域异步请求的访问.........
- SpringBoot多跨域请求的支持(JSONP)
- SpringBoot下如何配置实现跨域请求?
- Spring Boot实现异步请求(Servlet 3.0)
- Ajax+Spring MVC实现跨域请求(JSONP)
- SpringBoot下如何配置实现跨域请求?
- vue+springboot实现项目的CORS跨域请求
- SpringBoot下如何配置实现跨域请求?
- SpringBoot下如何配置实现跨域请求?
- SpringBoot下如何配置实现跨域请求?
- 详解SpringBoot多跨域请求的支持(JSONP)
- SpringBoot下如何配置实现跨域请求?
- SpringBoot下如何配置实现跨域请求?
- Ajax+Spring MVC实现跨域请求(JSONP)
- Spring Boot支持JSONP跨域请求数据(Ajax的jsonp)
- SpringBoot下如何配置实现跨域请求?
- SpringBoot下如何配置实现跨域请求?
- Ajax+Spring MVC实现跨域请求(JSONP)
- Ajax+Spring MVC实现跨域请求(JSONP)JSONP 跨域