为了账号安全,请及时绑定邮箱和手机立即绑定

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
 */
@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
}

json请求.png

对应的js请求代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js+springboot解决跨域请求</title>
</head>
<body>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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

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

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

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
252
获赞与收藏
1021

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消