本文共 1361 字，大约阅读时间需要 4 分钟。

一、什么是跨域？

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

例如:

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)@ResponseBodypublic ResponseEntity
   
     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数据。