通过jsonp解决浏览器跨域问题

2019独角兽企业重金招聘Python工程师标准>>>

一、什么是jsonp

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

二、例子

1、客户端写法

这里借用了前端jquery框架对jsonp的支持

var ajaxUrl = "http://192.168.8.141:9092/project/rest/team/matchResult/1/20/1/1000";


function localHandler(data) {
	console.log("fengshu")
	console.log(data);
}

var ajaxParam = {
	async: false,
	url: ajaxUrl, 
	type: "GET",
	dataType: 'jsonp',//非正式跨域传输协议
	jsonp: 'localHandler',
	success: function (json) {
		//回调数据在localHandler处理
	}
};
$.ajax(ajaxParam);

2、服务器端写法

@RequestMapping("/matchResult/{page}/{pageSize}/{type}/{matchId}")
	public  void getMatchResult(HttpServletResponse response, @PathVariable("page") int page,
			@PathVariable("pageSize") int pageSize, @PathVariable("type") String type,@PathVariable("matchId") String matchId) {
		EntityList datas = dddService.getTeamRanks(matchId,type,page,pageSize);
		ObjectMapper objectMapper = new ObjectMapper();
		String jsonResult=null;
		try {
			jsonResult = objectMapper.writeValueAsString(datas);
		} catch (JsonGenerationException e1) {
			e1.printStackTrace();
		} catch (JsonMappingException e1) {
			e1.printStackTrace();
		} catch (IOException e1) {
			e1.printStackTrace();
		}
		PrintWriter out=null;
		response.setCharacterEncoding("UTF-8");
		try {
			out = response.getWriter();
			
		} catch (IOException e) {
			e.printStackTrace();
		}  out.println( "localHandler("+jsonResult + ")");
                out.close();
	}

三、总结

目前在浏览器端使用json传输数据jsonp传输协议是解决跨域问题的首选方案

转载于:https://my.oschina.net/fengshuzi/blog/360727