jsonp解决js跨域请求

news/2024/7/19 15:04:57 标签: JS, Jsonp
跨域产生的原因

在一个项目中,使用js的ajax请求,请求另外一个系统的数据时(协议不同(http、https)、域名不同、域名相同但端口号不同),能够请求到数据,但是因为这是跨域请求,浏览器不允许js拿到数据,这就是ajax跨域请求

解决方案

可以jsonp解决js的跨域请求,Jsonp不是新技术,是跨域的解决方案。因为在系统中可以通过跨域来加载js文件,所以可以使用js的特性绕过跨域请求。

jsonp的原理

在这里插入图片描述
一个系统的访问url是localhost:8082,它需要同ajax请求来访问localhost:8088下的json数据,此时因为两个系统的端口不同,所以产生了ajax跨域请求,浏览器不允许js取得数据,此时,可以使用jsonp来结局跨域请求,定义一个js方法mycall(data){},data就是返回的从另一个服务返回的json数据,可以在这个方法中拿到json数据进行业务处理,而在ajax请求中,只需要多携带一个参数callback=mycall,在服务器接收到这个ajax请求之后,判断参数中是否有callback,如果有,就将json数据封装成一个js语句,返回到浏览器,返回的是"mycall({id:xx,name:xx});" 里面的数据就是json字符串,但js接收到这个响应后,就会调用mycall方法,就实现可跨域请求数据

jsonp的实现
  1. 客户端:
    可以直接使用jquery封装jsonp,只需要在ajax请求中加上dataType : “jsonp”, 其余的按照普通ajax处理方式,jquery内部写了一个方法callback(data),而且会自动在这个请求后面加上参数callback=mycall,参数名就是callback,但返回响应后,会自动调用mycall方法,将数据注入ajax请求的success : function(data){}中的data
  2. 服务端:
@Controller
public class TokenController {

	@Autowired
	private TokenService tokenService;
	
	/**
	 * 根据token,从redis中取出用户信息
	 * 如果是ajax跨域请求,则需要jsonp请求,需要传递一个callback参数,并且需要返回一个String类型的js语句
	 * 如果返回String的话,返回的的response默认是Content-Type默认是text/html,
	 * 这里需要用produces = MediaType.APPLICATION_JSON_UTF8_VALUE指明返回json类型的数据
	 * @param token
	 * @param callback
	 * @return
	 */
	/*@RequestMapping(value = "/user/token/{token}", 
			produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
	@ResponseBody
	public String getUserByTokenFromRedis(@PathVariable String token, String callback){
		Result result = tokenService.getUserByTokenFromRedis(token);
		
		//响应结果之前,判断是否为jsonp请求,是的话把结果封装成js语句返回
		if(StringUtils.isNotBlank(callback)){
			return callback + "(" + JsonUtils.objectToJson(result ) + ");";
		}
		return JsonUtils.objectToJson(result );
	}*/
	
	/**
	 * 这个方法的写法和上述的效果是一样的,上面的是spring4.1以前的原生的写法,这个是4.1以后的封装了之后的写法
	 * @param token
	 * @param callback
	 * @return
	 */
	@RequestMapping(value = "/user/token/{token}")
	@ResponseBody
	public Object getUserByTokenFromRedis(@PathVariable String token, String callback){
		Result result = tokenService.getUserByTokenFromRedis(token);
		
		//响应结果之前,判断是否为jsonp请求,是的话把结果封装成js语句返回
		if(StringUtils.isNotBlank(callback)){
			MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result );
			mappingJacksonValue.setJsonpFunction(callback);
			return mappingJacksonValue;
		}
		return result ;
	}
}

http://www.niftyadmin.cn/n/1513927.html

相关文章

mysql主从切换gtid不一致_【MySQL】Mysql5.7.21 传统复制切换到gtid复制遇到的一个现象...

说明:系统:centos7主库 M:192.168.16.12:3306从库 S:192.168.16.15:3306主从复制:传统复制一、场景M、S目前基于log、pos点的复制,想要将其在线切换为基于GTID的复制,操作…

Mycat操作Mysql数据库分片

什么是数据库分片 简单来说,就是指通过某种特定的条件,将我们存放在同一个数据库中的数据分散存放到多个数据库(主机)上面,以达到分散单台设备负载的效果。 数据的切分(Sharding)根据其切分规则…

python爬虫编程的一些图_python爬虫爬取图片的简单代码

Python是很好的爬虫工具不用再说了,它可以满足我们爬取网络内容的需求,那最简单的爬取网络上的图片,可以通过很简单的方法实现。只需导入正则表达式模块,并利用spider原理通过使用定义函数的方法可以轻松的实现爬取图片的需求。1、…

Mycat系列—常用的分片规则

1、分片枚举 通过在配置文件中配置可能的枚举 id&#xff0c;自己配置分片&#xff0c;本规则适用于特定的场景&#xff0c;比如有些业务需要按照省份或区县来做保存&#xff0c;而全国省份区县固定的&#xff0c;这类业务使用本条规则&#xff0c;配置如下&#xff1a; <t…

centos7 装mysql5.6_[数据库]centos7 中安装 mysql5.6 的过程

[数据库]centos7 中安装 mysql5.6 的过程0 2018-10-10 15:00:29前提是Centos的环境是好的&#xff0c;并且相关的软件包已经安装好。1、创建用户&#xff0c;并修改创建的数据目录的属主[rootbogon ~]# useradd -M mysql -s /sbin/nologin [rootbogon ~]# mkdir /data[rootbogo…

跨域解决方案CORS

CORS是一个W3C标准&#xff0c;全称是"跨域资源共享"&#xff08;Cross-origin resource sharing&#xff09;。CORS需要浏览器和服务器同时支持。目前&#xff0c;所有浏览器都支持该功能&#xff0c;IE浏览器不能低于IE10。 它允许浏览器向跨源服务器&#xff0c;…

Mysql主从配置和Mycat配置读写分离

主从配置需要注意的地方 1、主DB server和从DB server数据库的版本一致 2、主DB server和从DB server数据库数据名称一致 3、主DB server开启二进制日志,主DB server和从DB server的server_id都必须唯一&#xff08;一般我们采用服务器ip地址的尾数&#xff09; 在 https://b…