JSONP

题目1：什么是同源策略

浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
通俗来说就是我在自己的家里想做什么就做什么，但是不能随便去别人家胡作非为。
本域指的是？
同协议：如都是http或者https
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是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)

需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域

题目2 什么是跨域？跨域有几种实现形式？

跨域，从字面上来看就是突破同源策略的限制，去不同的域下访问数据。主要有如下几种实现形式：

jsonp
CORS：跨域资源共享（Cross-Origin Resource Sharing）
降域
postMessage()

题目3 JSONP 的原理是什么?

我们发现，用//与前面的jsonFn对应，注意先后顺序以防报错: haha is not defined. //服务端代码server-side - routes app.get("/getSth", function(){ var data = req.query.callback + '(参数)' ;//提取问号后callback键值对的值并加工成函数调用形式的字符串。 res.send(data); });

题目四： CORS是什么

CORS全称Cross-Origin Resource Sharing，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。
CORS定义了在必须访问跨域资源时，浏览器与服务器要如何沟通。原理是使用自定义的的HTTP请求头部让浏览器与服务器沟通，从而决定请求或相应是否成功。比如在发送一个简单的get请求时，需要给它附加一个额外的origin头部，其中包含请求页面的源信息，以便让服务器根据这个头部信息决定是否给予响应。
比如发送了一个origin头部：
Origin: http://www.a.dandan.com
如果服务器(后端）认为这个请求可以接受，就在Access-Control-Allow-Origin头部中发回相同的源信息：
Access-Control-Allow-Origin: http://www.a.dandan.com(与请求相同)

简单的说，就是当我想要得到小明家的糖时，我向小明发出请求，但爸爸允许我告诉小明我想要糖，但是不允许我得到糖，所以会拦截下小明的糖不给我！(跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了)
当我们有了CORS之后，相当于我在小明家写上了Access-Control-Allow-Origin: http://www.iWantCandy.com,这句话使得爸爸允许我吃小明家的糖，就不再拦截小明给我的糖，（请求能发出，响应也能得到）

CORS

题目5：根据视频里的讲解演示三种以上跨域的解决方式

全部代码
1.JSONP
核心代码



//动态引用


// 或者静态引用，和动态引用没有本质差别
//

2、CORS
核心代码
服务端：

res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080"); 
//res.header("Access-Control-Allow-Origin", "*");

3、降域

document.domain+iframe

使用document.domain 更改当前文档的域名
例如把"www.a.dandan.com"和"www.b.dandan.com"这两个不同的域名，降域更改为

document.domain  = 'www.dandan.com'

这要求两个被更改的域名的父域名要相同

４ＰＯＳＴＭＥＳＳＡＧＥ
postMessage的原理是会向另一个地方发送信息，另一个地方通常是iframe,或者是由当前页面弹出的窗口。参数是：信息以及表示接受消息方的来自哪个域的字符串，如果给定*便是不限定接受者的域。
举个栗子，在一个html中嵌入另一个html文件的iframe，并且互相发送postMessage并响应在input框以此来观察效果。
核心代码：

＜ｓｃｒｉｐｔ＞
 document.querySelector('#input').addEventListener('input', function(event){
        console.log(event.target.value)
        window.frames[0].postMessage(event.target.value,'*')
    })
  //window接收消息  
    window.addEventListener('message', function(event){
        document.querySelector('#input').value = event.data
        console.log(event.data)
    })
＜／ｓｃｒｉｐｔ＞

对于ｉｆｒａｍｅ：

 //iframe向父元素框发送消息
    document.querySelector('#input').addEventListener('input', function(event){
        window.parent.postMessage(event.target.value, '*')
    })
    //当有人给iframe发消息
    window.addEventListener('message', function(event){
        document.querySelector('#input').value = event.data
    })

两个ｈｔｍｌ文件代码：
第一个html
第2个html