导航
const http = require('http');
const url = require('url');
// 创建代理服务器
const proxyServer = http.createServer((req, res) => {
// 解析目标服务器的 URL
const targetUrl = '<http://target-domain.com>' + req.url;
const options = {
hostname: url.parse(targetUrl).hostname,
port: 80,
path: url.parse(targetUrl).path,
method: req.method,
headers: req.headers
};
// 向目标服务器发送请求
const proxyReq = http.request(options, (proxyRes) => {
// 将目标服务器的响应返回给客户端
res.writeHead(proxyRes.statusCode, proxyRes.headers);
proxyRes.pipe(res);
});
req.pipe(proxyReq);
});
proxyServer.listen(3000);
document.domain
属性,将主页面和子页面的域名设置为相同的基础域名,这样就可以在主页面中通过 iframe.contentWindow
来获取子页面的 window
对象,进而操作子页面中的数据或调用子页面中的方法。主页面(假设域名为 parent.example.com
):
<script>
document.domain = 'example.com';
var iframe = document.createElement('iframe');
iframe.src = '<http://sub.example.com/page.html>';
iframe.onload = function() {
// 可以访问子页面的一些数据或方法
};
document.body.appendChild(iframe);
</script>
子页面(假设域名为 sub.example.com
):
<script>
document.domain = 'example.com';
</script>
window.name
的特性,在一个窗口的生命周期内,其 name
属性值可以在不同页面之间共享且可读写。先让 iframe 中的页面程序保存 window.name
,然后跳转到与父级窗口同源的另一个页面,父级页面就可以从当前的 iframe 拿到该页面的 window.name
,从而获取到数据。主页面:
<script>
var flag = false;
var iframe = document.createElement('iframe');
function getData() {
if (flag) {
var data = iframe.contentWindow.name;
console.log(data);
} else {
flag = true;
iframe.contentWindow.location = '<http://parent-domain.com/same-origin-page.html>';
}
}
iframe.src = '<http://other-domain.com/data-page.html>';
iframe.onload = getData;
document.body.appendChild(iframe);
</script>
iframe 页面:
<script>
window.name = 'Data from other domain';
</script>
postMessage
是 HTML5 提供的一种在不同窗口或 iframe 之间进行通信的方法。主页面和 iframe 子页面可以通过 postMessage
方法发送和接收消息,实现跨域数据传递。页面 a
(父页面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page A</title>
</head>
<body>
<h1>Page A</h1>
<button id="sendToB">Send Message to B</button>
<iframe id="iframeB" src="<http://example.com/b.html>" width="600" height="400"></iframe>
<script>
const iframe = document.getElementById('iframeB');
// 发送消息给 B 页
document.getElementById('sendToB').addEventListener('click', function() {
const message = { text: "Hello from A!" };
iframe.contentWindow.postMessage(message, '<http://example.com>'); // 目标源应为 B 页的真实 URL
});
// 接收来自 B 页的消息
window.addEventListener('message', function(event) {
// 验证消息来源
if (event.origin !== '<http://example.com>') return; // 目标源应为 B 页的真实 URL
// 处理消息
console.log('Message from B:', event.data);
});
</script>
</body>
</html>
页面 b
(嵌入页面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page B</title>
</head>
<body>
<h1>Page B</h1>
<button id="sendToA">Send Message to A</button>
<script>
// 发送消息给 A 页
document.getElementById('sendToA').addEventListener('click', function() {
const message = { text: "Hello from B!" };
window.parent.postMessage(message, '<http://parent.example.com>'); // 目标源应为 A 页的真实 URL
});
// 接收来自 A 页的消息
window.addEventListener('message', function(event) {
// 验证消息来源
if (event.origin !== '<http://parent.example.com>') return; // 目标源应为 A 页的真实 URL
// 处理消息
console.log('Message from A:', event.data);
});
</script>
</body>
</html>
postMessage
调用中指定了正确的目标源 URL。message
事件时,通过检查 event.origin
来验证消息的来源。window.parent.postMessage()
让嵌入的页面(b
)发送消息给父页面(a
)。iframe.contentWindow.postMessage()
让父页面(a
)发送消息给嵌入的页面(b
)。http://example.com
和 http://parent.example.com
) 为实际使用的域名。postMessage
是现代浏览器的标准特性,支持大多数主流浏览器。通过这种方式,你可以在不同源的页面之间建立安全且有效的双向通信。
location.hash
的变化来传递数据。主页面修改 iframe 的 src
的哈希值,iframe 监听到哈希值变化后进行相应处理,然后 iframe 修改自身的哈希值,主页面监听到变化后获取数据。主页面:
<iframe id="myFrame" src="<http://other-domain.com/iframe-page.html>"></iframe>
<script>
var iframe = document.getElementById('myFrame');
window.addEventListener('hashchange', function() {
// 获取 iframe 传递的数据
console.log(location.hash);
});
function sendDataToIframe(data) {
iframe.src = iframe.src + '#data=' + data;
}
</script>
iframe 页面:
<script>
window.addEventListener('hashchange', function() {
// 获取主页面传递的数据
var data = location.hash.substring(1);
// 处理数据后传递回主页面
parent.location.hash = 'dataFromIframe=' + 'processedData';
});
</script>
Access-Control-Allow-Origin
等响应头来允许其他源的浏览器访问自己的资源。 const http = require('http');
const url = require('url');
http.createServer((req, res) => {
const origin = req.headers.origin;
// 允许指定源访问
res.setHeader('Access-Control-Allow-Origin', '<http://allowed-domain.com>');
// 允许的请求方法
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
// 允许的请求头
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
const data = { response: 'Data from server' };
res.end(JSON.stringify(data));
}).listen(8081);