Web前端跨域请求jsonp

小灰灰 2022-03-17 14:38 177阅读 0赞

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

## ##

### 什么是跨域： ###

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。相反，只要**协议，域名，端口**有任何一个的不同，就被当作是跨域。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

### 什么是同源策略： ###

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。  
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

不受同源策略限制的：  
1、页面中的链接，重定向以及表单提交是不会受到同源策略限制的。  
2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。

### jsonp的原理： ###

首先在js客户端注册一个callback，然后把callback的名字传给服务器。此时，服务器根据业务逻辑成要返回的json数据，然后以javascript语法的方式，把callback的名字和json数据拼接成一个函数调用的格式，返回给客户端。客户端浏览器，解析script变迁，并执行返回javascript文档，此时数据作为参数，传入了客户端预先定义好的callback函数里。

简单的说，就是利用script标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。

java后台代码：

@RequestMapping("/check")
    	@ResponseBody
    	public Object checkdata(String callback) {
    			MappingJacksonValue jacksonValue = new MappingJacksonValue(result);
    			jacksonValue.setJsonpFunction(callback);
    			return jacksonValue;
    	}

这里使用MappingJacksonValue来封装，result就是生成的业务结果json数据, 把result传入，然后再设置回调函数的名字，就是callback,  然后返回即可。由于@ResponseBody的存在，所以会返回json数据。