ajax跨域访问http服务--jsonp

在前面一篇文章《Spring Cloud 前后端分离后引起的跨域访问解决方案》里我们提到使用ajax跨域请求其他应用的http服务，使用的是后台增加注解@CrossOrigin或者增加CorsFilter过滤器，然后ajax调用时设置xhrFields{withCredentials: true}来传递cookie信息。

本文采用jsonp方式处理。

背景

应用A 的地址为http:127.0.0.1:8081

应用B的地址为http:127.0.0.1:8082

应用B提供一个后台http服务/hello来返回session等相关信息

A的前台ajax跨域访问B的此http服务

应用A前台ajax代码：

 

 $.ajax({
            type: "POST",
            async: "true",
            url: "http://127.0.0.1:8082/hello",
            dataType: "jsonp",
            jsonp:"jsonpCallback",
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus + "," + errorThrown);
            },
            beforeSend: function (XMLHttpRequest) {
            },
           /* 使用jsonp时无需添加此属性。cookie会默认传递到后端
           xhrFields: {
                withCredentials: true
            },*/
            success: function (data, status) {
                alert("数据：" + data + "\n状态：" + status);
            }
        });

其中

1.dataType=jsonp，表示用于跨域请求。

2.jsonp属性的值可自行定义，这个值在后台会用到。jsonp属性用于指定获得jsonp回调函数名的参数名(默认为:callback)。这个值用来替代URL中"callback=?"里的"callback"部分，比如代码中设置了jsonp=jsonpCallback，则会将"jsonpCallback=?"传给服务器。

应用B后台代码

@RequestMapping("/hello")
    //@CrossOrigin 使用jsonp则无需此注解
    Object hello() {
        String result = "hello,i'm spring boot,server.port=" + port + ";sessionId=" + RequestUtil.getSessionId( );
        log.info("hello,result={}", result);

        //打印cookie信息，以确认cookie是否传递过来
        Cookie[] cookies = RequestUtil.getRequest( ).getCookies( );
        if (cookies != null && cookies.length > 0) {
            for (Cookie cookie :
                    cookies) {
                log.info("cookie,key={},value={}", cookie.getName( ), cookie.getValue( ));
            }
        }
        
        //判断是否是jsonp请求（此处的jsonpCallback与ajax中jsonp的值对应），如果是jsonp的，则需要返回jsonp(result)
        String jsonpCallback = RequestUtil.getRequest( ).getParameter("jsonpCallback");

        if (StringUtils.isEmpty(jsonpCallback))
            return result;
        else
            return new JSONPObject(jsonpCallback, result);//最终的效果是jsonpCallback(result)

}

 注意：jsonp调用时返回JSONPObject对象，真正从后台返回的字符串格式如下：

jQuery111108124416126231964_1534906372378("hello,i'm spring boot,server.port=8082;sessionId=B2411EAD05B3FD792F7C80756E72B2E1")
0

其中jQuery111108124416126231964_1534906372378即前台ajax传递的jsonpCallback参数的值。。

验证

多次访问，session不变。。

抓包：

后台日志：可见session没变。。cookie也传递过去了

 

总结

 对于jsonp方式的ajax跨域访问，无需增加xhrFields参数，会默认传递cookie，后台返回jsonpObject，后台无需增加跨域注解或者跨域过滤器

对于非jsonp的普通ajax调用，需要增加xhrFields参数标示需要传递cookie，后台需增加跨域注解或者跨域过滤器