前端跨域问题

同源：

两个页面拥有相同的协议，端口，域名 就是同源，如果有一个不相同就是不同源。

jsonp

请求

// 1.封装一个jsonp函数;
jsonp({
    // method: 'GET',// 所有的jsonp请求都是get请求，所以这个属性可以不写了
    // data: , // 写了以后太繁琐，取消
    url: 'http://www.localhost:3006/api/jsonp',
    success: function (res) {
        console.log(res)
    }
})
 
// 封装
function jsonp(obj) {
    // 1.创建一个script标签;   2.改变src    3.给函数起名字，定义为全局函数；
    var script = document.createElement("script"); // 不要用innerHTML, 他不会自动发送请求
    // 3.给函数起名字，定义为全局函数；
    var fnName = "haha_123123";
    // window.aaa就是把aaa设置为全局变量！
    window[fnName] = obj.success;
    // 2.改变src,添加到head中
    script.src = obj.url + "?callback=" + fnName;
    // 把script标签添加到head标签中，就会发送src的请求了
    document.head.appendChild(script);
    // 代码执行完毕，把script标签删除
    script.onload = function () {
        document.head.removeChild(script);
        window[fnName] = undefined;
    }
}

处理

app.get("/api/jsonp", (req, res) => {
    // 获取函数名,设置对象,发送给客户端
    const fnName = req.query.callback;
    // 定义发送给客户端的对象转换为json字符串
    var objStr = JSON.stringify({
        name: '张三',
        age: 18
    });
    // 字符串类型的执行函数
    res.send(`${fnName}(${objStr})`);
});

window.postMessage

<script>
 function onLoad(){
     var iframe = document.getElementById("iframe");
     var win = iframe.contentWindow;
     win.postMessage('哈哈，我是来自页面a.html的信息哟！','*');//向不同域的www.script.com/b.html发送消息
 }
  </script>
<iframe id="iframe" src="www.script.com/b.html" οnlοad="onLoad()"></iframe>

<script>
 window.onmessage = function(e){//注册message时间来接收消息
     e = e || event;            //获取时间对象
     alert(e.data);             //通过data属性来得到传送的消息
 }
 </script>

使用跨域资源共享（CORS）来跨域

CORS：一种跨域访问的机制，可以让AJAX实现跨域访问；CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。
服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求．
就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

Web sockets

web sockets： 是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)

web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

<script>
 var socket = new WebSockt('ws://www.test.com');
 //http->ws; https->wss
 socket.send('hello WebSockt');
 socket.onmessage = function(event){
     var data = event.data;
 }