纵有疾风起
人生不言弃

springboot解决js前端跨域问题,javascript跨域问题解决

最近用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}
springboot解决js前端跨域问题,javascript跨域问题解决插图
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>

请求效果如下

springboot解决js前端跨域问题,javascript跨域问题解决插图(1)
跨域请求.png

有任何关于编程的问题都可以留言或者私信我,我看到后会及时解答

编程小石头,码农一枚,非著名全栈开发人员。分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑。

文章转载于:https://www.jianshu.com/p/67eaede7172d

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » springboot解决js前端跨域问题,javascript跨域问题解决

分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活