方案一: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。 该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。

posted on 2021-09-24 09:57  铭の  阅读(258)  评论(0编辑  收藏  举报

友情链接:箫竹影(Java工程师)