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