JSONP 跨域

题目1： 什么是同源策略

答：

• 协议相同 (http https ftp file ...)

• 域名相同 (域名是第一个//到第一个/之间的部分)

• 端口相同 (默认端口是80)
  满足以上即为同源。

• 同源策略： 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

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

答：
跨域：不满足以上同源条件，即请求跨域。

ajax不能跨域

实现跨域的四个方法： JSONP、CORS、降域、PostMessage

题目3： JSONP 的原理是什么

答：
JSONP，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

浏览器端：

    <script>
        var script = document.createElement('script')
        script.setAttribute('src','http://127.0.0.1:8080/test?cb=foo') //跨域，注意参数为函数名

        document.head.appendChild(script) //添加节点，js执行执行，即执行获取到的 foo(data) 的代码
        document.head.removeChild(script) //执行完去掉多余节点

        function foo(data) {
          console.log('hello world ' + data)
        }
    </script>

服务器端:

    router.get('/test', function(req, res) {
        var callback = req.query.cb
        var data = '"this is jsonp"'   
        res.send(callback+ '(' + data + ')') //返回了foo(data),浏览器端就当js代码执行调用foo(data)
    })

题目4： CORS是什么

答：
跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。

浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段（协议 + 域名 + 端口)。
服务器可以指定对哪些Origin字段的请求进行响应。

浏览器端：

    <script>
        var xhr = new XMLHttpRequest()
        xhr.onload = function() {
            if (xhr.status === 200 || xhr.status === 304) {
                console.log(JSON.parse(xhr.responseText))
            } 
        }
        xhr.open('get', 'http:127.0.0.1:8080/test', true) 
        xhr.send()
    </script>

服务器端：

    router.get('/test', function(req, res) {
        console.log('req!')
        res.header('Access-Control-Allow-Origin',"*")
        res.send(['this is cors'])
    })

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

答：

JSONP和CORS见题目3、4。

PostMessage实现跨域：

a.html

    <script>
      //URL: http://a.jrg.com:8080/a.html
      $('.main input').addEventListener('input', function(){ //a发消息到b
        console.log(this.value);
        window.frames[0].postMessage(this.value,'*');
      })
      window.addEventListener('message',function(e) {//a接收b的消息
          $('.main input').value = e.data
          console.log(e.data);
      });
      function $(id){
        return document.querySelector(id);
      }
    </script>

b.html

    <script>
      // URL: http://b.jrg.com:8080/b.html
      $('#input').addEventListener('input', function(){//b发消息到a
        window.parent.postMessage(this.value, '*');
      })
      window.addEventListener('message',function(e) {//b接收a的消息
          $('#input').value = e.data
          console.log(e.data);
      });
      function $(id){
        return document.querySelector(id);
      } 
    </script>

降域实现跨域：

假设 a.jrg.com 和 b.jrg.com 要相互访问数据，用以下方法可以降域到jrg.com，实现跨域。

document.domain = 'jrg.com';