1： 什么是同源策略
- 其中同源指的是：
1.协议相同
2.域名相同
3.端口相同
一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。 - 同源策略是浏览器最基本的安全功能。如果没有同源策略，那么普通用户将没有安全可言。用户的所有私密信息都可以被被任何人获取，例如网站的Cookie、email的邮件内容。还很容易遭受CSRF攻击。
- 要注意的是，域名和域名对应ip是不同源的；主域名相同，子域名不相同也是不同源的
- 同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
举例来说，http://www.jirengu.com/dir/page.html这个网址，协议是http://，域名是www.jirengu.com，端口是80（默认端口可以省略）。它的同源情况如下。
http://www.jirengu.com/dir2/other.html：同源
http://jirengu.com/dir/other.html：不同源（域名不同）
http://v2.www.jirengu.com/dir/other.html：不同源（域名不同）
http://www.jirengu.com:81/dir/other.html：不同源（端口不同）
2： 什么是跨域？跨域有几种实现形式
- 跨域是指不同域名之间相互访问。
- 跨域的实现方式有：
1.JSONP
2.CORS
3.降域
4.postMessage
3： JSONP 的原理是什么
- 原理：
<script src="XXX"></script>获取不同域的资源不受同源策略的作用，并且请求到资源后立即执行 - 首先全局注册一个回调函数
callback。该函数的参数是JSON格式。函数的内容是一系列代码处理这个参数，像这样function callback(arg){xxx} - 动态生成一个
script标签，src为：请求资源的地址＋获取函数的字段名＋回调函数名称。获取函数的字段名是要和服务端约定好的。例如src="http://example.com?callbackName=callback"。 - 在服务器端，在接受到
script的请求之后，从url的query的callbackName获取到回调函数的名字callback。然后动态生成JSON格式的参数，并且将该参数传入callback函数，调用该函数。像这样callback({key: value})。 - 因为
script标签引入的资源会作为JS加载，所以，callback({key: value})会被作为JS代码执行，并且callback是被注册过的函数，所以是可以执行成功的
4： CORS是什么
- CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。
- CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。
- 在浏览器端的区别就是，xhr.open(url)的url要从相对路径变为绝对路径
- 在服务器端，要设置Access-Control-Allow-Origin
- CORS有两种情况，分别为简单请求和非简单请求
简单的含义是：请求方法为HEAD、GET、POST三者之一并且HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
对于简单的跨域请求，浏览器会自动在请求的头信息加上 Origin 字段，表示本次请求来自哪个源（协议 + 域名 + 端口），服务端会获取到这个值，然后判断是否同意这次请求并返回
- 非简单请求可以顾名思义，对于这类请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）
- 浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
- "预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。
- 一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。
5： 根据视频里的讲解演示三种以上跨域的解决方式
- JSONP
//浏览器端
var jsonp = document.createElement("script"); //创建一个script标签
jsonp.src = "http://www.test.com:8080/getdata?callbackName=callback"; //设置src地址
document.getElementsByTagName("head")[0].appendChild(jsonp); //将script放在head里面
//定义callback函数
function callback(args){
console.log(args);
console.log("JSONP跨域成功")
}
//服务器端
app.get('/getdata', function(req, res){
var data = {a: 1,};
res.send(req.query.callbackName + '(' + JSON.stringify(data) + ')');
})
- CORS
//浏览器端
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.status === 304){
var result = JSON.parse(xhr.responseText);
console.log(result);
console.log("CORS跨域成功");
}
}
}
xhr.open("GET", "http://b.test.com:8080/getdata/"); //从http://b.test.com:8080/getdata/获取数据
xhr.send();
//服务端
app.get('/getdata', function(req, res){
var data = {a: 1,};
res.header("Access-Control-Allow-Origin", "http://a.test.com:8080"); //后台允许http://a.test.com:8080请求数据
res.send(data);
})
- 降域
//在主页面http://a.test.com/a.html 中设置document.domain
document.domain = 'test.com';
var iframeWindow = document.getElementById('iframe').contentWindow
//在被Iframe引入的页面 http://b.test.com/b.html 中也设置document.domain
document.domain = 'test.com'
- window.postMessage
//主页面http://a.test.com/a.html
var iframeWindow =document.getElementById('iframe').contentWindow;
iframeWindow.postMessage("some Messages", "*");
//在被Iframe引入的页面 http://b.test.com/b.html
window.onmessage = function(e) {
e = e || event;
console.log(e.data);
}
