技术爱好者
https://blog.csdn.net/m_jack/article/details/80497617
一、什么是跨域访问
举个栗子：在A网站中，我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的。跨域访问违反了同源策略，同源策略的详细信息可以点击如下链接：Same-origin_policy；
总而言之，同源策略规定，浏览器的ajax只能访问跟它的HTML页面同源（相同域名或IP）的资源。
二、什么是JSONP
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的元素是一个例外。利用元素的这个开放策略，网页可以得到从其他来源动态产生的JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用JSON 解析器解析。更具体的原理需要更多篇幅的讲解，小伙伴可以自行去百度。
三、JSONP的使用
前端的使用示例
JQuery Ajax对JSONP进行了很好的封装，我们使用起来很方便。前端示例：
$.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat",//访问的链接
dataType:"jsonp",//数据格式设置为jsonp
jsonp:"callback",//Jquery生成验证参数的名称
success:function(data){//成功的回调函数
alert(data);
},
error:function (e) {
alert("error");
}
});
需要注意的地方是：
dataType，该参数必须要设置成jsonp
jsonp，该参数的值需要与服务器端约定，详细情况下面介绍。（约定俗成的默认值为callback）
后端的配合示例
JQuery Ajax Jsonp原理
后端要配合使用jsonp，那么首先得了解Jquery Ajax jsonp的一个特点：
Jquery在发送一个Ajax jsonp请求时，会在访问链接的后面自动加上一个验证参数，这个参数是Jquery随机生成的，例如链接
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046
中，参数callback=jQuery31106628680598769732_1512186387045&_=1512186387046就是jquery自动添加的。
添加这个参数的目的是唯一标识这次请求。当服务器端接收到该请求时，需要将该参数的值与实际要返回的json值进行构造（如何构造下面讲解），并且返回，而前端会验证这个参数，如果是它之前发出的参数，那么就会接收并解析数据，如果不是这个参数，那么就拒绝接受。
需要特别注意的是这个验证参数的名字（我在这个坑上浪费了2小时），这个名字来源于前端的jsonp参数的值。如果把前端jsonp参数的值改为“aaa”，那么相应的参数就应该是
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046
后端接收与处理
知道了Jquery Ajax Jsonp的原理，也知道了需要接受的参数，我们就可以来编写服务器端程序了。
为了配合json，服务器端需要做的事情可以概括为两步：
第一步、接收验证参数
根据与前端Ajax约定的jsonp参数名来接收验证参数，示例如下（使用SpringMVC，其他语言及框架原理类似）
@ResponseBody
@RequestMapping("/getJsonp")
publicString getMySeatSuccess(@RequestParam("callback")String callback){
第二步、构造参数并返回
将接收的的验证参数callback与实际要返回的json数据按“callback(json)”的方式构造：
@ResponseBody
@RequestMapping("/getMySeat")
publicString getMySeatSuccess(@RequestParam("callback")String callback){
Gson gson=new Gson();//google的一个json工具库
Map map=new HashMap<>();
map.put("seat","1_2_06_12");
return callback+"("+gson.toJson(map)+")";//构造返回值
}
四、总结
最终，前后端的相应代码应该是这样的：
前端
$.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat",//访问的链接
dataType:"jsonp",//数据格式设置为jsonp
jsonp:"callback",//Jquery生成验证参数的名称
success:function(data){//成功的回调函数
alert(data);
},
error:function (e) {
alert("error");
}
});
后端
@ResponseBody
@RequestMapping("/getMySeat")
publicString getMySeatSuccess(@RequestParam("callback")String callback){
Gson gson=new Gson();
Map map=new HashMap<>();
map.put("seat","1_2_06_12");
logger.info(callback);
return callback+"("+gson.toJson(map)+")";
}
需要注意的是：
前端注意与后端沟通约定jsonp的值，通常默认都是用callback。
后端根据jsonp参数名获取到参数后要与本来要返回的json数据按“callback(json)”的方式构造。
如果要测试的话记得在跨域环境（两台机器）下进行。
完整的示例就是上面两段代码，这里就不提供Github连接了。上面的示例亲测有效，如果有遇到问题的，欢迎留言提问。
原文：https://blog.csdn.net/zhoucheng05_13/article/details/78694766?utm_source=copy
什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：
http://www.123.com/index.html 调用 http://www.123.com/server.PHP（非跨域）
http://www.123.com/index.html 调用 http://www.456.com/server.php（主域名不同:123/456，跨域）
http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。
你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的，这种不安全也就是CSRF（Cross-site
request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session
riding，缩写为：CSRF/XSRF。
一张图解释什么是CSRF
首先我们来想一想
为什么会有跨域这个名词的出现呢?
跨域又是什么呢?为何要跨域?
浏览器的同源策略又是什么?怎么解决?
jsonp又是什么?
跨域的原理又是什么呢?
名词解释:
跨域:
浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.
上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同
同源策略:
请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
比如:我在本地上的域名是study.cn,请求另外一个域名一段数据
这个时候在浏览器上会报错:
这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~
study.cn/json/jsonp/jsonp.html
请求地址 形式 结果
http://study.cn/test/a.html同一域名,不同文件夹 成功
http://study.cn/json/jsonp/jsonp.html同一域名,统一文件夹 成功
http://a.study.cn/json/jsonp/jsonp.html不同域名,文件路径相同 失败
http://study.cn:8080/json/jsonp/jsonp.html 同一域名,不同端口 失败
https://study.cn/json/jsonp/jsonp.html 同一域名,不同协议 失败
jsonp:
jsonp全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。
一个是描述信息的格式，一个是信息传递双方约定的方法。
jsonp的产生:
1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.
2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候
3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>
4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.
5.而json又是一个轻量级的数据格式,还被js原生支持
6.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，
demo1:基于script标签实现跨域
举个例子:我在http://study.cn/json/jsonp/jsonp_2.html下请求一个远程的js文件
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6
7 <script type="text/javascript">
8 var message = function(data) {
9 alert(data[1].title);
10 };
11 </script>
12
13 <script type="text/javascript" src="http://web.cn/js/message.js"></script>
14 </head>
15 <body>
16 <div id='testdiv'></div>
17 </body>
18 </html>
远程的message.js文件是
1 message([
2 {"id":"1", "title":"天津新闻联播，雷人搞笑的男主持人"},
3 {"id":"2", "title":"楼市告别富得流油 专家:房价下跌是大概率事件"},
4 {"id":"3", "title":"法国人关注时事 八成年轻人每天阅读新闻"},
5 {"id":"4", "title":"新闻中的历史,历史中的新闻"},
6 {"id":"5", "title":"东阳新闻20140222"},
7 {"id":"6", "title":"23个职能部门要增加新闻发布频次"},
8 {"id":"7", "title":"《贵州新闻联播》 中国美丽乡村"},
9 {"id":"8", "title":"朝韩离散家属团聚首轮活动结束"},
10 {"id":"9", "title":"索契冬奥会一天曝出两例兴奋剂事件"},
11 {"id":"10", "title":"今天中国多地仍将出现中度霾"}
12 ]);
这个时候我们得到的相应头是:
这样就实现跨域成功了,因为服务端返回数据时会将这个callback参数(message)作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
demo2: 基于script标签实现跨域
让远程js知道它应该调用的本地函数叫什么名字,只要服务端提供的js脚本是动态生成的就好了,这样前台只需要传一个callback参数过去告诉服务端,我需要XXX代码,于是服务端就会得到相应了.
例如 在http://study.cn/json/jsonp/jsonp_3.html页面请求 http://192.168.31.137/train/test/jsonpthree
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6
7 <script type="text/javascript">
8 var messagetow = function(data){
9 alert(data);
10 };
11 var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow";
12 var script = document.createElement('script');
13 script.setAttribute('src', url);
14 document.getElementsByTagName('head')[0].appendChild(script);
15 </script>
16 </head>
17 <body>
18 </body>
19 </html>
得到的响应头是:
demo3: 基于jquery跨域
那么如何用jquery来实现我们的跨域呢???jquery已经把跨域封装到ajax上了,而且封装得非常的好,使用起来也特别方便
如果是一般的ajax请求:
1 $.ajax({
2 url:'http://192.168.31.137/train/test/testjsonp',
3 type : 'get',
4 dataType : 'text',
5 success:function(data){
6 alert(data);
7 },
8 error:function(data){
9 alert(2);
10 }
11 });
那么在浏览器中会报错:
jsonp形式的ajax请求:并且通过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript" src="./js/jquery.js"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 var name = 'chenshishuo';
10 var sex = 'man';
11 var address = 'shenzhen';
12 var looks = 'handsome ';
13 $.ajax({
14 type : 'get',
15 url:'http://192.168.31.137/train/test/testjsonp',
16 data : {
17 name : name,
18 sex : sex,
19 address : address,
20 looks : looks,
21 },
22 cache :false,
23 jsonp: "callback",
24 jsonpCallback:"success",
25 dataType : 'jsonp',
26 success:function(data){
27 alert(data);
28 },
29 error:function(data){
30 alert('error');
31 }
32 });
33 });
34 </script>
35 </head>
36 <body>
37 <input id='inputtest' value='546' name='inputtest'>
38 <div id='testdiv'></div>
39 </body>
40 </html>
jsonp 传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback 自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
看看请求头和相应头吧
请求头:jquery会自动带入callback参数,当服务端获取到这个参数后,返回回来.(响应头)
现在是不是明白了跨域的基本原理,和基本的使用方法呢??
上面我们说到img中的src可以自动调用远程图片的(这个比较简单我在这里就不说了)
还有ifram请求:
基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com 这种特点，
也就是两个页面必须属于一个基础域（例如都是xxx.com)，使用同一协议和同一端口，这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数
要点就是 :通过修改document.domain来跨子域
demo4: 通过iframe来跨子域
http://a.study.cn/a.html 请求 http://b.study.cn/b.html
在a.html:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript">
7 document.domain = 'study.cn';
8 function test() {
9 alert(document.getElementById('a').contentWindow);
10 }
11 </script>
12 </head>
13 <body>
14 <iframe id='a' src='http://b.study.cn/b.html' onload='test()'>
15 </body>
16 </html>
在b.html:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6
7 <script type="text/javascript">
8 document.domain = 'study.cn';
9 </script>
10 </head>
11 <body>
12 我是b.study.cn的body
13 </body>
14 </html>
运行效果截图:
我们就可以通过js访问到iframe中的各种属性和对象了
如果你想在http://a.study.cn/a.html页面中通过ajax直接请求页面http://b.study.cn/b.html，即使你设置了相同的document.domain也还是不行的.
所以修改document.domain的方法只适用于不同子域的框架(父类与子类)间的交互。
如果想通过使用ajax的方法去与不同子域间的数据交互或者是js调用，只有两种方法,一种是使用jsonp的方法外，还有一种是使用iframe来做一个代理。
原理就是让这个 iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面，所以这个iframe中的页面是可以正常使用ajax去获取你要的数据 的，
然后就是通过我们刚刚讲得修改document.domain的方法，让我们能通过js完全控制这个iframe，这样我们就可以让iframe去发 送ajax请求，然后收到的数据我们也可以获得了。
上面的所有知识点,应该可以解决第一开始提出的问题了吧.
0
0
« 上一篇：Windows中杀死占用某个端口的进程
» 下一篇：Maven构建可执行的jar包(包含依赖jar包)
posted @2019-03-06 18:37隐隐真阅读(17) 评论(0)编辑收藏
（评论功能已被禁用）
【推荐】超50万C++/C#源码: 大型实时仿真组态图形源码
【前端】SpreadJS表格控件，可嵌入系统开发的在线Excel
相关博文：
·WindowsPhone下拉刷新控件 - PullRefreshListBox（二）
·让Fckeditor支持中文——解决“Error loading "/fckeditor/fckstyles.xml" ”
·【原】Sql Server性能优化——Partition（创建分区）
最新新闻：
·MIT 推出 AI 编程语言 Gen：以自动化、灵活性和速度见长
我的标签
English(48)
js(45)
java(40)
spring boot(29)
angularjs(18)
git(16)
eclipse(16)
jQuery(7)
linux(7)
maven(7)
随笔分类
文章分类
