起风网最近用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 */@Componentpublic 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}
json请求.png
对应的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>请求效果如下
跨域请求.png
有任何关于编程的问题都可以留言或者私信我，我看到后会及时解答
编程小石头，码农一枚，非著名全栈开发人员。分享自己的一些经验，学习心得，希望后来人少走弯路，少填坑。
文章转载于:https://www.jianshu.com/p/67eaede7172d
原著是一个有趣的人,若有侵权,请通知删除
评论前必须登录！
立即登录