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数据的不同如下图:

ajax跨域问题以及解决方案_第1张图片

 

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

ajax跨域问题以及解决方案_第2张图片

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

五、前端jsop实现

查看发起请求的逻辑:

ajax跨域问题以及解决方案_第3张图片

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

六、后台处理jsonp数据

RequestMethod.GET)
@ResponseBody
public 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数据。

你可能感兴趣的:(跨域,ajax,jsonp)