跨域

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);
    }