ajax跨域问题以及解决方案

一、什么是跨域？

跨域就是跨域名或跨端口号进行调用

例如:

www.taotao.com >> www.jd.com                        是跨域

www.taotao.com >> sso.taotao.com                   是跨域

www.taotao.com >> www.taotao.com:8080       是跨域

www.taotao.com >> www.taotao.com                不是跨域

只有请求者和被请求者的域名和端口号完全一致，才不是跨域

二、什么是跨域问题？

js使用Ajax进行跨域请求，无法返回数据（json、xml等）

三、为什么会有跨域问题？

浏览器基于安全考虑，不允许Ajax请求跨域调用数据（json、xml等）

四、使用jsonp解决跨域问题

jsonp核心原理：

js使用Ajax无法跨域调用数据（xml，json等），但是可以跨域调用js数据

js的Ajax请求数据和请求js数据的不同如下图：

 

解决js使用Ajax无法跨域获取数据的方法：

上图，我们可以通过请求js的方式，进行跨域调用。

五、前端jsop实现

查看发起请求的逻辑：

分析发现使用的dataType是jsonp，这里使用的是jsonp技术，这样前端请求，在url后面会拼上callback参数：

六、后台处理jsonp数据

RequestMethod.GET)
@ResponseBody
public ResponseEntity<String> check(HttpServletRequest request, @PathVariable("param") String param,
		@PathVariable("type") Integer type) {
	try {
		Boolean bool = this.userService.check(param, type);

		// 1 获取callback参数
		String callback = request.getParameter("callback");

		// 2. 判断callback是否为空，
		if (StringUtils.isNotBlank(callback)) {
			// 如果不为空，表示请示使用的jsonp进行，我们就需要把返回的json数据进行包裹，使用callback
			String result = callback + "(" + bool + ")";
			return ResponseEntity.ok(result);

		} else {
			// 如果为空，表示请求不是使用的jsonp，和原来一样，直接返回
			return ResponseEntity.ok(bool + "");
		}

		// 200
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	// 500
	return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}

七、前端接收处理

前端接收到返回的数据后，在处理封装号的js数据，获取其中的json数据。