来源：互联网转载 | 更新日期：2024-02-05 10:14:38

为什么浏览器要限制跨域访问?

　　详细：https://www.zhihu.com/question/26379635

　　安全。例如：通过js获取他人在其他网站的cookie中的用户信息等。

为何要跨域?

　　转载：https://www.jianshu.com/p/f5153f4a1a9e?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

　　跨域问题来源于浏览器的同源策略（是对于javascript的限制），即只有 协议+主机名+端口号

　　(如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等。

同源策略

　　同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。（https://baike.baidu.com/item/%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5/3927875?fr=aladdin）

以下内容，转载： https://blog.csdn.net/Aaroun/article/details/86491917

你知道实现跨域的几种方式吗？

首先来提几个问题，大家看自己是否了解：

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

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

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

jsonp又是什么?

跨域的原理又是什么呢?

接下来为大家一一做下解释：

名词解释:

跨域:

浏览器的同源策略是对于javascript的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了。

上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同

同源策略:

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

比如:我在本地上的域名是study.cn,请求另外一个域名一段数据

这个时候在浏览器上会报错:

这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~

jsonp全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。

一个是描述信息的格式，一个是信息传递双方约定的方法。

jsonp的产生:

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

3.凡是拥有scr这个属性的标签都可以跨域例如12 13 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 });

那么在浏览器中会报错:

jsonp形式的ajax请求:并且通过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求

1 2 3 4 5 Insert title here 6 7 35 36 37 38

39 40 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 2 3 4 5 Insert title here 6 12 13 14