Jsonp介绍

利用script标签的src没有跨域限制通过get请求解决跨域问题。对不同浏览器兼容性较好。

非同源的访问都是跨域访问。

同源是指：域名、协议、端口都相同。

如前端端口为8081，后端端口为8080，则可以使用如下方式进行跨域访问。

前端实现

调用例子如下：

<script type='text/javascript'>
    window.jsonpCallback = function (res) {
        console.log(res)
    }
</script>
<script src='http://localhost:8080/demo?callback=jsonpCallback' type='text/javascript'></script>
           

jQuery的$.ajax()也对jsonp协议提供了支持

<script>
    $.ajax({
        url: "http://localhost:8080/demo",
        dataType: "jsonp",
        type: "get",
        data: {
            id: 1
        },
        jsonp: "callback",
        success: function (data) {
            console.log(data);
        }
    });
</script>
           

后端实现

SpringMVC对Jsonp的支持代码如下：

@ControllerAdvice(basePackages = "com.demo.controller")
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
    public JsonpAdvice() {
        super("callback", "jsonp");
    }
}
           

当参数中包含“callback”或“jsonp”参数时，就会返回jsonp协议的数据。

例如url为：http://localhost:8080/queryData?callback=test，返回的jsonp协议的数据为test({"age":1,"name":"Liam"})。其中回调函数的名称为test。