JSONP解决跨域问题

环境：

 前端：Jquery + AJax

 后台：SpringMVC

实现思路：前端传入一个JS回调函数名，后台将数据转换为字符串，并用函数名包裹起来，组成一个函数的形式返回前端，前端的回调函数就可以接收到返回的数据。

前端调用：

function onBack(data){
	alert(JSON.stringify(data))
}

$.ajax({
    url: 'http://192.168.22.105:8081/KingQuery/api/test/stu',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

注意点是Ajax请求中的dataType是jsonp，jsonpCallback为已经定义好的回调函数名。

后台(以SpringMVC框架为例)：

 在请求的Controller类或者方法的@requestMapping注释上添加 produces = {"text/javascript;charset=UTF-8"}属性，这样返回的数据类型为text/javascript，charset设置为UTF-8是为了解决中文返回前端后乱码的问题。

@RestController
@RequestMapping(value = "/workshop", produces = {"text/javascript;charset=UTF-8"})
public class DataWorkShopRest {

方法示例：

@RequestMapping("/serviceapp")
public String getServiceAppWorkShopDetail(HttpServletRequest request) {
String callback = request.getParameter("callback"); 

try {
ServiceAppWorkShop data = serviceAppWorkShopRest.getData();
return callback+"(" +JSONObject.toJSONString(Result.success(data)).toString() +")";
} catch (Exception e) {
e.printStackTrace();
}
return callback+"(" +JSONObject.toJSONString(Result.error(new HeadMsg(500, "服务器内部错误"))).toString() +")";
}

这里主要是接收前端传入的callback参数，将需要返回的数据转换为字符串格式，用函数名包裹返回即可。

跨域问题的解决并不只有JSONP一种方案，可以查阅其他的相关文章。