最近用springboot开发后台接口,但是接口开发好以后,用js请求接口json数据,遇到了烦人的跨域问题,也是找了好久才找到解决方法。下面来讲解下解决步骤。
一,编写Filter过滤器
把下面代码放到你的springboot项目中就可以了
package com.qcl;
import org.springframework.stereotype.Component;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
/**
* 处理跨域问题
* qcl:微信2501902696
*/
@Component
public class OriginFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PUT");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
chain.doFilter(req, res);
}
@Override
public void destroy() {
}
}
二,用js做下请求验证下
如我们需要请求https://localhost:8443/pv/2048/list
获取如下数据,https://localhost:8443/pv/2048/list是我部署在服务器上的,2020年到期,你也可以访问
{
"code": 100,
"msg": "成功",
"data": 3
}
![29cc42a795568717ec3102e2ed53205f.png](https://i-blog.csdnimg.cn/blog_migrate/155f6257ffb5383017314d75e4db08c2.jpeg)
对应的js请求代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js+springboot解决跨域请求</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
var baseUrl = "https://30paotui.com";
$(document).ready(function () {
$("button").click(function () {
$.ajax({
url: baseUrl + "/pv/2048/list", success: function (result) {
document.getElementById("p1").innerHTML = result;
var str = JSON.stringify(result); //将JSON对象转化为JSON字符
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
console.log(str);
console.log(obj);
console.log(obj.data);
console.log(result.msg);
console.log(result.code);
}
});
});
});
</script>
<p id="p1"></p>
<button>获取其他内容</button>
</body>
</html>
请求效果如下
![17988248fd0f35484750c65909e370fa.png](https://i-blog.csdnimg.cn/blog_migrate/a058d1865c4238b887baddecc4573078.jpeg)
有任何关于编程的问题都可以留言或者私信我,我看到后会及时解答
编程小石头,码农一枚,非著名全栈开发人员。分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑。