跨域

含义:

不满足浏览器的同源策略的请求响应会被浏览器拦截

同源策略:同协议,同域名,同端口,

解决方法:

1. jsonp

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);
    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

原理:利用script标签不受同源协议影响的特点,

缺点:

1. 只能发起get请求
2. 需要对来源(请求头中的refer)进行筛选

2. 跨域资源共享（CORS）

只需服务端设置Access-Control-Allow-Origin即可,但由于浏览器的同源策略,a.com向b.com发送请求时只会携带b.com的cookie,所以如果前端想携带cookie就需要设置

前端设置是否带cookie
xhr.withCredentials = true;

3.nginx代理跨域

反向代理

4.websocket双向通信实现跨域

WebSocket protocol是HTML5一种新的协议。不同于之前的http协议,只能由客户端向服务端发送请求,
WebSocket 支持双向通信,服务端也可以向客户端发送请求,并且支持跨域

// 初始化一个 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("连接已关闭...");
};