1、 什么是同源策略
同源策略（Same Origin Policy）是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受到影响。可以说Web是构建在同源策略的基础之上的，浏览器只是针对同源策略的一种实现。
浏览器的同源策略，限制了来自不同源的“document”或脚本，对当前“document”读取或设置某些属性。
这一策略是极其重要的，试想如果没有同源策略，可能 a.com 的一段 JavaScript 脚本，在 b.com 未曾加载此脚本时，也可以随意涂改 b.com 的页面（在浏览器的显示中）。为了不让浏览器的页面行为发生混乱，浏览器提出了“Origin”（源）这一概念，来自不同 Origin的对象无法互相干扰。
在浏览器中，<script>、<img>、<iframe>和<link>这几个标签是可以加载跨域（非同源）的资源的，并且加载的方式其实相当于一次普通的GET请求，唯一不同的是，为了安全起见，浏览器不允许这种方式下对加载到的资源的读写操作，而只能使用标签本身应当具备的能力（比如脚本执行、样式应用等等）。
最常见的跨域问题是Ajax跨域访问的问题，默认情况下，跨域的URL是无法通过Ajax访问的。
本域指的是：
- 同协议：如都是http或者https；
- 同域名：如都是http://baidu.com/a和http://baidu.com/b，即两个斜杠到一个斜杠之间的要相同；
- 同端口：如都是80端口，默认不写的话是80端口。
如：http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)
不同源的例子：
http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80，第二个是8080)
需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域。
2、 什么是跨域？跨域有几种实现形式
允许不同域的接口进行交互，说白点就是post、get的url不是你当前的网站，域名不同。
跨域的几种方式：
- JSONP
- CORS
- 降域
- postMessage
3、 JSONP 的原理是什么
JSONP是怎么产生的
（1）、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；
（2）、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如（<script>、<img>、<iframe>）；
（3）、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；
（4）、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；
（5）、这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。
（6）、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。
（7）、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
JSONP是什么
JSONP是“JSON with Padding”的略称，可以让网页从别的域名（网站）那获取资料，即跨域读取数据，将JSON数据填充进回调函数callback。
(1)、浏览器的同源策略把跨域请求都禁止了；
(2)、HTML的<script>标签是例外，可以突破同源策略从其他来源获取数据；
(3)、由上可得，我们可以通过<script>标签引入jsonp文件;
JSONP返回的数据
如客户想访问 : http://www.runoob.com/try?jsonp=callbackFunction。
假设客户期望返回JSON数据：["customername1","customername2"]。
真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。
步骤如下
(1)、定义数据处理函数_fun
(2)、创建script标签，src的地址执⾏后端接⼝，最后加个参数callback=_fun
(3)、 服务端在收到请求后，解析参数，计算返还数据，输出 fun(data) 字符串。
(4)、fun(data)会放到script标签做为js执⾏。此时会调⽤fun函数，将data做为参数。
4、 CORS是什么
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是⼀种 ajax 跨域请求资源的⽅式，⽀持现代浏览器，IE⽀持10以上。 实现⽅式很简单，当你使⽤XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加⼀个请求头：Origin，后台进⾏⼀系列处理，如果确定接受请求则在返回结果中加⼊⼀个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们⽆法拿到响应数据。
需要在服务器端代码加上
res.header("Access-Control-Allow-Origin", "http://a.kuayu.com:8080"); //接受http://a.kuayu.com:8080的访问
res.header("Access-Control-Allow-Origin", "*"); //接受所有域的访问
5、 根据视频里的讲解演示三种以上跨域的解决方式
JSONP
代码
CORS
代码
降域
对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在a.kuayu.com/a.html和hb.kuayu.com/b.html两个文件中分别加上document.domain = ‘kuayu.com’；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况，如果你异想天开的把script.a.com的domian设为alibaba.com那显然是会报错的。
document.domain="kuayu.com"
缺点：
1、安全性，当一个站点（a.kuayu.com）被攻击后，另一个站点（b.kuayu.com）会引起安全漏洞。
2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。
代码
postMessage
通常用于解决以下页面之间的跨域数据传输：
(1)、页面和其打开的新窗口的数据传递
(2)、多窗口之间消息传递
(3)、页面与嵌套的iframe消息传递
postMessage(data,origin)方法接受两个参数:
- data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
- origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
代码
网友评论