一,引言
最近小编在写这样一套服务端的代码,说白了就是提供数据和处理一些业务逻辑。这个服务端是单独的一个工程,提供给PC端,移动端(IOS,Android)等多个终端进行调用。在调试过程中发现这样的一个异常,才了解到我们的JS请求是不能跨域请求的。为了考虑安全性的问题,JS只能访问相同域名,相同端口号的地址。但是JS能跨域请求JS,正好利用了这个因素,才有了JSONP这个解决方案。错误提示信息如下:
Failed to load http://127.0.0.1:8081/rest/itemcat/all?callback=category.getDataService: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.
二,什么是JSONP?
JSONP其实是解决JS跨域调用数据的一种方案,JS跨域直接请求数据是不可以的,但是JS跨域请求JS脚本是可以的。可以把返回的数据封装成一个JS脚本,把数据作为。参数传递到这个方法中,做一个方法的调用的js跨域请求可以得到此脚本数据,从而获取到想要到数据。执行流程如下:
三,JSONP使用方式
那使用JSONP请求服务端,那服务端该怎么返回数据呢看如下代码:
再给大家科普小知识:在使用RequestMapping注解的时候,也可以设置返回JSON数据的字符编码哟!
produce = MediaType.APPLICATION_JSON_VALUE +“; charset = utf-8“
在这只提供了服务端怎么写,具体JS怎么调用麻烦各位小伙伴自行学习下,因为调用是前端工程师写的,没源码给我,如果有小伙伴实在没找到,那就在评论区留言,小编回头找前端工程师要要哈哈!
@RequestMapping(value = "/itemcat/all" ,produces = MediaType.APPLICATION_JSON_VALUE+";charset=utf-8")
@ResponseBody
public Object getItemCatList(String callback){
//需要返回的数据
CatResult itemCat = itemCatService.getItemCat();
//callback 这个是js调用时传过来的参数,内容就是回调的方法名
//第一种方式 ,把我们返回的数据转JSON后,然后拼接我们在js中定义的方法名,把json数据作为参数传递进去
//返回 String
/*String jsonStr = JsonUtils.objectToJson(itemCat);
return callback + "("+jsonStr+");";*/
//第二种方式,使用Spring自带对象,前提是需要在Srping4.0以上的版本才有的哟。
//返回 Object
MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(itemCat);
mappingJacksonValue.setJsonpFunction(callback);
return mappingJacksonValue;
}