JSONP&跨域

1. 什么是同源策略

• 同源指的是网页的协议、域名和端口都相同，不同源的客户端脚本在没明确授权的情况下，不能读写对方的资源。
• 同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
• 随着互联网的发展，现主要有三种行为受到同源策略的限制：
  • Cookie、LocalStorage 和 IndexDB 无法读取。
  • DOM 无法获得。
  • AJAX 请求不能发送。

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

2. 什么是跨域，跨域有几种实现形式？

• 跨域：为了获取不同源网页上的图片、脚本等资源，我们就需要跨域了。
• 跨域的方式
  • JSONP
  • CORS
  • WebSocket
  • postMessage
  • window.name
  • document.domain

3. JSONP 的原理是什么？

• JSONP即 JSON with padding（填充式JSON或参数式JSON），是被包含在函数调用中的JSON，如callback({ "name": "xiaoming"})。
• JSONP是通过动态
  2. 创建 router.js

  router.get('/getMessages', function (req, res) {
      var name = req.query.name;
      var messages = [];
      if (name === '小明') {
          messages.push("name: 小明", "age: 23")
      } else if (name === '小李') {
          messages.push("name: 小李", "age: 20")
      } else {
          return;
      }
  
      var cb = req.query.callback;
      if (cb) {
          res.send(cb + '(' + JSON.stringify(messages) + ')');
      } else {
          res.send(messages);
      }
  })
  

  3. 打开本地服务器

     
     
     

     本地服务器.png

  4. 打开另外一个端口

     
     
     

     JSONP.png

  CORS：在HTTP请求里添加特殊的头，允许服务器指定特定的域名可以跨域访问。

  1. 创建 index.html

  
  
  
      
      
      
  
  
  获取信息
  
  
  
  

  2. 创建 router.js

  router.get('/getMessages', function (req, res) {
      res.header('Access-Control-Allow-Origin', '*');
      var name = req.query.name;
      var data = {};
      if (name === '小明') {
          data = {name: "小明"}
      } else if (name === '小李') {
          data = {name: "小李"}
      } else {
          return;
      }
      res.send(data);
  })
  

  3. 打开本地服务器

     
     
     

     本地服务器.png
  4. 打开另外一个端口
  

  CORS.png

  postMessage：允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

  1. 创建 index.html

  
  
  
      
      
  
  
  
  我是A窗口
  
  
  
  
  

  2. 创建 xxx.html

  
  
  
      
      
  
  
  
  我是B窗口
  
  
  
  

  3. 打开另外一个端口

     
     
     

     http-server.png

  4. 本地服务器

     
     
     

     postMessage.png