
文件:b.html
页面 B
运用 window.name 完成跨域
同样是页面之间的通讯,需求凭借 iframe 标签,A 页面和 B 页面是同域的 http://localhost:3000,C 页面在独立的域 http://localhost:4000。
服务器
// 服务器1
const express = require(express);
const app = express();
app.use(express.static(__dirname));
app.listen(3000);
// 服务器2
const express = require(express);
const app = express();
app.use(express.static(__dirname));
app.listen(4000);
完成思路:在 A 页面中将 iframe 的 src 指向 C 页面,在 C 页面中将特点值存入 window.name 中,再把 iframe 的 src 换成同域的 B 页面,在当时的 iframe 的 window 方针中取出 name 的值,拜访 http://localhost:3000/a.html。
文件:a.html
页面 A
文件:c.html
页面 C
运用 location.hash 完成跨域
与 window.name 跨域的状况相同,是不同域的页面间的参数传递,需求凭借 iframe 标签,A 页面和 B 页面是同域的 http://localhost:3000,C 页面是独立的域 http://localhost:4000。
服务器
// 服务器1
const express = require(express);
const app = express();
app.use(express.static(__dirname));
app.listen(3000);
// 服务器2
const express = require(express);
const app女士英文 = express();
app.use(express.static(__dirname));
app.listen(4000);
完成思路:A 页面经过 iframe 引进 C 页面,并给 C 页面传一个 hash 值,C 页面收到 hash 值后创立 iframe 引进 B 页面,把 hash 值传给 B 页面,B 页面将自己的 hash 值放在 A 页面的 hash 值中,拜访 http://localhost:3000/a.html。
文件:a.html
页面 A
文件:c.html
页面 C
文件:b.html
页烤鸭面 B
运用 document.domain 完成跨域
运用场景:不是全能的跨域办法,大多运用于同一公司不同产品间获取数据,有必要是一级域名和二级域名的联系,如 www.baidu.com 与 video.baidu.com 之间。
服务器
const express = 女性愿望require('express');
const app = express();
app.use(express.static(__dirname));
app.listen(3000);
想要模仿运用 document.domain 跨域的场景需求做些小小的预备,到 C:\Windows\System32\drivers\etc 该途径下找到 hosts 文件,在最下面创立一个一级域名和一个二级域名。
127.0.0.1 www.domainacross.com
127.0.0.1 sub.domainacross.com
命名是随意的,只要是契合一级域名与 二级域名的联系即可,然后拜访 http://www.domainacross.com:3000/a.html。
文件:a.html
页面 A
我是页面 A 的内容
文件:b.html
页面 B
我是 B 页面的内容
运用 WebSocket 完成跨域
WebSocket 没有跨域约束,高档 API(不兼容),想要兼容低版本浏览器,能够运用 socket.io 的库,WebSocket 与 HTTP 内部都是基赵传于 TCP 协议,差异在于 HTTP 是单向的(单双工),WebSocket 是双向的(全双工),协议是 ws:// 和 wss:// 对应 http:// 和 https://,因为没有跨域约束,所以运用 file:// 协议也能够进行通讯。
因为咱们在 NodeJS 服务中运用了 WebSocket,所以需求装置对应的依靠:
1
npm install ws --save
文件:index.html
页面
服务器
const express = require('express');
const app = express();
// 引进 webSocket
const WebSocket = require('ws');
// 创立衔接,端口号与前端相对应
const wss = new WebSocket.Server({ port: 3000 });
// 监听衔接
wss.on('connection" alt="空调遥控器,九种“姿态”给你彻底消除跨域难题-火竞猜娱乐-最佳电竞投注网站"/>