Jsonp实现跨域请求_springMVC实现后端接口

发表于 | 分类于

同源策略

了解跨域之前，首先了解一下“同源策略”。
同源指的是：域名、端口、协议相同。这是浏览器出于安全考虑，当前域中不可以访问其他域的东西。

在同源策略下，浏览器是不可以访问该服务器以外的数据的，但是在JavaScript中,<script>标签可以访问位于不同服务器中的文件，也就是说，它可以进行跨域请求。因此，我们所说的jsonp就是利用<script>标签实现跨域请求。

Jsonp

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。
jsonp其实很简单，就是动态创建<script>标签，利用其不受同源策略限制的优势进行跨域请求。

此处我们使用Jquery进行请求，使用SpringMVC进行服务器端Controller层的代码编写。

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
            //根据cookie向服务器查询用户
            url : "http://localhost:8089/user/token/
            dataType : "jsonp",     //此处要设置为jsonp
            type : "POST",
            data : {user:3a88cc4d-16a6-41a6-9079-f749ca8ab809}  //请求参数
            jsonpCallback: 'handleResponse', //设置回调函数名
            success : function(data){
                if(data.status == 200){
                    //do something
                }
            }
        });

在上面的代码中，必须将dataType设置为jsonp才可以接收返回的数据。

后端端代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@RequestMapping(value = "/user/token")
@ResponseBody
public Object getUserByToken(String user,String callback){
    Result Result = tokenService.getUserByToken(user);
    //判断是否为jsonp请求，如果callback不为空，则是jsonp请求
    if (StringUtils.isNotBlank(callback)){
        //spring内置的类 -- spring4.1之后才可以使用此类
        MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(e3Result);
        //设置回调函数名
        mappingJacksonValue.setJsonpFunction(callback);
        //返回结果
        return mappingJacksonValue;
    }
    //不是jsonp请求，正常返回json数据
    return Result;
}

到这里，前后端的代码已经编写完成，我们尝试在浏览器中请求一次

服务器响应数据：

从响应中我们可以看出，返回的数据形式和JavaScript函数很像，其实就是在动态模拟一个JavaScript函数调用而已。

感谢阅读本博客。

欢迎关注我的博客：https://li-weijian.github.io/

欢迎关注我的CSDN：https://blog.csdn.net/qq352642663

需要联系请加QQ：352642663

欢迎联系我共同交流