Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
79 lines (69 sloc) 2.33 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我们的网站</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>iframe+form+postMessage实现跨域</p>
<pre>打开控制台 console 和 network面板查看详情</pre>
<script>
function request({ url, method = "GET", headers, data, success }) {
headers = headers || {
'Content-Type': 'application/x-www-form-urlencoded',
};
window.onmessage = null; // 初始化,移除之前绑定的事件
window.onmessage = ({ data }) => {
success && success(data);
};
let ifr = document.createElement("iframe");
ifr.style.display = "none";
ifr.name = "proxy" + Date.now();
document.body.appendChild(ifr);
// 加载完移除iframe,防止创建多个iframe
ifr.addEventListener("load", () => {
ifr.remove();
});
let form = document.createElement("form");
let input = document.createElement("input");
form.style.display = "none";
form.action = url;
form.method = method.toUpperCase();
form.target = ifr.name; // 将form的打开目标移至iframe
form.enctype = headers['Content-Type'];
for (let key in data) {
input.name = key;
input.value = data[key];
form.appendChild(input.cloneNode());
}
document.body.appendChild(form);
form.submit();
form.remove(); // 表单提交之后移除form,防止创建多个form
}
request({
url: "http://localhost:3002/user/",
method: "POST",
data: {
name: "Yangfan",
age: 23,
},
success(data) {
console.log(data);
}
});
request({
url: "http://localhost:3002/user/",
method: "GET",
data: {
name: "Yangfan",
age: 23,
},
success(data) {
console.log(data);
}
});
</script>
</body>
</html>
You can’t perform that action at this time.