springmvc+jsonp解决跨域问题

最新推荐文章于 2020-12-31 10:30:13 发布

shisenlin啊

最新推荐文章于 2020-12-31 10:30:13 发布

阅读量499

点赞数

分类专栏： java后台开发前端文章标签： spring mvc jsonp 跨域

本文链接：https://blog.csdn.net/ZuoYanYouYan/article/details/78052255

版权

java后台开发同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

1、服务端：

    @RequestMapping("/gateway/testJsonp")
    @ResponseBody
    public Object testJsonp(@RequestParam(value = "callback", required = false) String callback) {
        if (StringUtils.isBlank(callback)){
            return "noJsonp";
        }
        MappingJacksonValue mappingJacksonValue = new MappingJacksonValue("this is return jsonp result value!");
        mappingJacksonValue.setJsonpFunction(callback);
        return mappingJacksonValue;
    }

2、客户端ajax：

<!DOCTYPE html>
<html>
<head>
<title>跨域请求和JSONP解决跨域</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.7.1.js"></script>
</head>
<body>
<h3>点击下面按钮</h3>

<button id="nojsonp">点我，没有jsonp</button>

<button id="jsonp">点我，jsonp解决跨域</button>

<script>

$("#nojsonp").click(function(){
    $.ajax({
        type:"post",
        url:"http://localhost:8080/smp-csg//gateway/testJsonp",
        dataType:"json",
        success:function(data){
            alert(data);
        },
        error:function(e){
            alert(e.status);
        }
    });
})
$("#jsonp").click(function(){
    $.ajax({
        type:"post",
        url:"http://localhost:8080/smp-csg//gateway/testJsonp",
        dataType:"jsonp",
        jsonpCallback:"jsonpCallback",
        success:function(data){
            alert("success function:"+data);
        },
        error:function(e){
            alert(e.status);
        }
    });
})
//该方法存在，则先调用该方法再调用ajax中的success方法，不存在则直接执行ajax中的success方法
function jsonpCallback(data){
    alert("callbackFunc:"+data);
}
</script>
</body>
</html>