跨域的好处

格格巫 MMQ!!

已于 2022-03-30 11:43:50 修改

阅读量361

点赞数

分类专栏：跨域文章标签： json 前端 javascript

于 2022-03-18 13:15:56 首次发布

本文链接：https://blog.csdn.net/weixin_43214644/article/details/123572271

版权

跨域专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript的跨域概念，由浏览器的同源策略引发，阐述了同源策略的定义及作用。针对跨域问题，讲解了JSONP的工作原理及其示例，同时提到了基于jQuery的跨域解决方案。此外，还探讨了iframe在跨子域中的应用。最后，总结了多种跨域方法，帮助读者深入理解这一关键的Web开发话题。

摘要由CSDN通过智能技术生成

首先我们来想一想

          为什么会有跨域这个名词的出现呢?

          跨域又是什么呢?为何要跨域?

          浏览器的同源策略又是什么?怎么解决?

          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这个属性的标签都可以跨域例如

4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

5.而json又是一个轻量级的数据格式,还被js原生支持

6.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，

demo1:基于script标签实现跨域

举个例子:我在http://study.cn/json/jsonp/jsonp_2.html下请求一个远程的js文件

复制代码
1
2
3
4
5 Insert title here
6
7
14
15
16

17
18
复制代码

远程的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
2
3
4
5 Insert title here
6
7
16
17
18
19
复制代码

得到的响应头是:
在这里插入图片描述

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 });
复制代码

那么在浏览器中会报错:
在这里插入图片描述