浏览器出于安全考虑存在同源策略。只有协议,域名,端口都一致,即同源才能访问另一个源的资源。同源策略阻止的是跨域资源的获取,而不是阻止跨域的请求,请求可以正常发出,但返回的内容被阻止。

跨域请求的方式:
1.JSONP的方式
利用script标签没有跨域的限制。
通过对src设置请求地址并设置callback参数。
服务器端要根据callback返回一个函数调用。把数据插入函数。

var jsonp = function (url, data, callback) {
    var dataString = url.indexof("?") == -1 ? "?" : '&';
    for (var key in data) {
        dataString += key + '=' + data[key] + '&'
    }

    var funcName = 'json_' + Math.random().toString().replace('.', ',');
    dataString += 'callback=' + funcName;

    var scriptEle = document.createElement('script');
    scriptEle.src = url + dataString;
    window[funcName] = function (data) {
        callback(data);
        document.body.removeChild(scriptEle);
    }
    document.body.appendChild(scriptEle);
}

2.CORS
后端设置响应头中的
Access-Control-Allow-Origin值是运训跨域的源网站地址
浏览器判断是否一致,进行响应。

3.nginx反向代理
反向代理就是在我们和真实的服务器之间有一台代理服务器,隐藏了真实的服务端,我们所有的请求都是通过它来进行转接的,只需要知道反向代理服务器是谁就好了。(正向代理隐藏了真实的客户端。反向代理隐藏了真实的服务器。)

4.websocket
WebSocket是一种通信协议,可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。
https://zhuanlan.zhihu.com/p/74326818