跨域信息传递解决方案

方案一：jsonp

利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

SONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。

实现方法：

1、通过id="sendJsonp"的按钮动态创建script标签，src属性为跨域请求地址，后接参数为回调函数callback

function createScript(src) {
    $("<script></script>").attr("src",src).appendTo("body")
}
$("#sendJsonp").click(function(){
    createScript("http://127.0.0.1:8080/test?callback=callback");
});

2、定义回调函数处理正常的业务逻辑，这里就控制台输出跨域请求结果。

function callback(json) {
    console.log(json)
}

3、服务端代码

// server.js
let express = require('express')
let app = express()
app.get('/test', function(req, res) {
  let { callback } = req.query
  res.end(`${callback}('hello world')`)
})
app.listen(8080)

方案二：postMessage

1、可以解决同一个浏览器打开的2个窗口之间的通信（必须是要通过JS触发打开的另一个页面之间通信，比如在一个页面通过window.open，打开另外一个页面，然后这两页面之间可以通信）

2、可以解决iframe嵌套页面之间的通信

实现方法

在页面一中：

$('#newpage').click(function(){
  newUrl = 'http://172.168.10.24:3808/test2/table.html'
   var myPopup  = window.open(newUrl,'myWindow')
   setTimeout(function(){
    myPopup.postMessage('页面一来了','http://172.168.10.24:3808/');
   },4000)
})

window.addEventListener('message',function(event) {
  if(event.origin !== 'http://172.168.10.24:3808') return;
  console.log('received response: ',event.data);
},false);

在页面二中

 window.addEventListener('message',function(event) {
    if(event.origin !== 'http://172.168.10.24:3808') return;
    console.log('received response: ',event.data);
},false);

setTimeout(function(){
  window.opener.postMessage('页面二来了','http://172.168.10.24:3808/')
},4000)

opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。

当使用window.open()打开一个窗口，您可以使用此属性返回来自目标窗口源（父）窗口的详细信息。

代码提示： window.opener.close()将关闭源（父）窗口。

方案三：websocket

Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案

方案四：服务器（Node）中间件代理

实现原理：同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略

方案五：nginx反向代理

实现原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求

方案六：cors

实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。

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