前端跨域之详解

一、websocket 跨域

• WebSocket 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。原生WebSocket API使用起来不太方便，推荐使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

  前端的代码实现

  <div>user input：<input type="text"></div>
  <script src="./socket.io.js"></script>
  <script>
  var socket = io('http://www.520sha.com:8080');
  
  // 连接成功处理
  socket.on('connect', function() {
     // 监听服务端消息
     socket.on('message', function(msg) {
         console.log('data from server: ---> ' + msg); 
     });
  
     // 监听服务端关闭
     socket.on('disconnect', function() { 
         console.log('Server socket has closed.'); 
     });
  });
  
  document.getElementsByTagName('input')[0].onblur = function() {
     socket.send(this.value);
  };
  </script>

  node后台的实现

  var http = require('http');
  var socket = require('socket.io');
  
  // 启http服务
  var server = http.createServer(function(req, res) {
     res.writeHead(200, {
         'Content-type': 'text/html'
     });
     res.end();
  });
  
  server.listen('8080');
  console.log('Server is running at port 8080...');
  
  // 监听socket连接
  socket.listen(server).on('connection', function(client) {
     // 接收信息
     client.on('message', function(msg) {
         client.send('hello：' + msg);
         console.log('data from client: ---> ' + msg);
     });
  
     // 断开处理
     client.on('disconnect', function() {
         console.log('Client socket has closed.'); 
     });
  });

---

二、 通过jsonp跨域

我们知道script标签是没有跨域限制的。所以我们可以通过在html页面中再通过script标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参并指定回调执行函数为onBack
    script.src = 'http://www.520sha.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);

    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>

jQuery的实现方法

    $.ajax({
        type:'GET', 
        dataType:'jsonp', //请求方式为jsonp 
        data:{ "username":"Nealyang" }
     })

• jsonp缺点：只能实现get一种请求。数据被公开，别人可以调用。

---