nginx

使用nginx反向代理实现跨域，参考我这篇文章：前端开发者必备的 nginx 知识

cors

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求。

服务端设置Access-Control-Allow-Origin就可以开启CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    next();
});

jsonp

script标签的src属性中的链接可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

jquery对jsonp的支持：

$.ajax({
    type : "get",
    url : "http://xxxx"
    dataType: "jsonp",
    jsonp:"callback",
    jsonpCallback: "doo",
    success : function(data) {
        console.log(data);
    }
});

fetch、axios等并没有直接提供对jsonp的支持，如果需要使用这种方式，我们可以尝试进行手动封装：

(function(window, document) {
    "use strict";
    var jsonp = function(url, data, callback) {
        // 1.将传入的data数据转化为url字符串形式
        // {id:1,name:'jack'} => id=1&name=jack
        var dataString = url.indexof("?") == -1 ? "?" : "&";
        for (var key in data) {
            dataString += key + "=" + data[key] + "&";
        }

        // 2 处理url中的回调函数
        // cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）
        var cbFuncName =
            "my_json_cb_" +
            Math.random()
                .toString()
                .replace(".", "");
        dataString += "callback=" + cbFuncName;

        // 3.创建一个script标签并插入到页面中
        var scriptEle = document.createElement("script");
        scriptEle.src = url + dataString;

        // 4.挂载回调函数
        window[cbFuncName] = function(data) {
            callback(data);
            // 处理完回调函数的数据之后，删除jsonp的script标签
            document.body.removeChild(scriptEle);
        };

        document.body.appendChild(scriptEle);
    };

    window.$jsonp = jsonp;
})(window, document);

postMessage 跨域

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

//捕获iframe
var domain = "http://scriptandstyle.com";
var iframe = document.getElementById("myIFrame").contentWindow;

//发送消息
setInterval(function() {
    var message = "Hello!  The time is: " + new Date().getTime();
    console.log("blog.local:  sending message:  " + message);
    //send the message and target URI
    iframe.postMessage(message, domain);
}, 6000);
//响应事件
window.addEventListener(
    "message",
    function(event) {
        if (event.origin !== "http://davidwalsh.name") return;
        console.log("message received:  " + event.data, event);
        event.source.postMessage("holla back youngin!", event.origin);
    },
    false
);

postMessage跨域适用于以下场景：同浏览器多窗口间跨域通信、iframe间跨域通信。

WebSocket

WebSocket 是一种双向通信协议，在建立连接之后，WebSocket的 server与 client都能主动向对方发送或接收数据而不受同源策略的限制。