前后端通信

1、浏览器的同源政策限制：端口，域名，协议 ，只要一个不一样就跨域

2、前后端通信的方式

• ajax

• Websocket : 协议 http https (SSL) file socket.io
• CORS fetch()

2.1 原生ajax

 function ajax(options){
            var pramas = {
                url:'',
                type: 'get',
                data: {},
                success: function (data) {},
                error: function (err) {},
            }
            options = Object.assign(pramas, options)
            if(options.url){
                var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
                var url = options.url,
                    type = options.type.toUpperCase(),
                    data = options.data,
                    dataArr = [];
                for(let key in data){
                    let value = key + '='+ data[key]
                    dataArr.push(value)
                }
                if(type === "GET"){
                    url = url + "?" + dataArr.join('&')
                    xhr.open(type, url, true)
                    xhr.send()
                }
                if(type === "POST"){
                    xhr.open(type,url, true)
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                    xhr.send(dataArr.join('&'))
                }
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
                        options.success(xhr.responseText)
                    }else {
                        options.error(xhr.responseText)
                    }
                }
            }
        }

2.2 Websocket

websocket 的使用说明 https://www.runoob.com/html/html5-websocket.html

2.2.1 WebSocket 是什么

• WebSocket 是 HTML5提供一种通信协议

2.2.2 为什么需要Websocket

• HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理
• HTTP 协议无法实现服务器主动向客户端发起消息。
• 大多数 Web 应用程序将通过频繁的异步JavaScript和XML（AJAX）请求实现长轮询。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

// 初始化一个 WebSocket 对象
var ws = new WebSocket("ws://localhost:9998/echo");

// 建立 web socket 连接成功触发事件
ws.onopen = function () {
  // 使用 send() 方法发送数据
  ws.send("发送数据");
  alert("数据发送中...");
};

// 接收服务端数据时触发事件
ws.onmessage = function (evt) {
  var received_msg = evt.data;
  alert("数据已接收...");
};

// 断开 web socket 连接成功触发事件
ws.onclose = function () {
  alert("连接已关闭...");
};

2、跨域通信的几种方式：

• 第一种 JSONP(优点:简单方便,缺点:只能使用get请求,不支持post请求)： 利用的是script标签 的src属性，这个src天然跨域的行为

// 动态创建一个script标签var script = document.createElement("script") 
   <script>
       var callback = function(res){
                console.log(res)
         }
        var script = document.createElement("script")
        script.src = " "  //请求地址 
        document.querySelector('body').appendChild(script)
    </script> 

• 第二种 postMessage

      // postMessage
      // 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
      Bwindow.postMessage('data', 'http://B.com');
      // 在窗口B中监听
      Awindow.addEventListener('message', function (event) {
          console.log(event.origin);
          console.log(event.source);
          console.log(event.data);
      }, false);

• 第三种 Websocket

  var ws = new WebSocket('wss://echo.websocket.org');
      ws.onopen = function (evt) {
          console.log('Connection open ...');
          ws.send('Hello WebSockets!');
      };
      ws.onmessage = function (evt) {
          console.log('Received Message: ', evt.data);
          ws.close();
      };
      ws.onclose = function (evt) {
          console.log('Connection closed.');
      };

• 第四种 CORS: 通过配置fetch跨域（浏览器会拦截跨域请求，在请求头上添加跨域）

fetch('/some/url/', {
          method: 'get',
      }).then(function (response) {

      }).catch(function (err) {
        // 出错了，等价于 then 的第二个参数，但这样更好用更直观
      });

• 第五种 axios反向代理
• 第六种 nginx的反向代理(少用)