一、准备阶段：
- 安装部署server-mock
- npm install -g server-mock：安装server-mock
- mock init：生成3个文件
- mock start：开启服务
- 更改localhost文件
- win10电脑下：C:\Windows\System32\drivers\etc\HOSTS，打开HOSTS文件
- 添加并保存：
127.0.0.1 b.cl.com
127.0.0.1 a.cl.com
- 将XMLHttpRequest对象.open方法的url参数变为完整地址：如'http://a.cl.com:8080/more'；
- 在浏览器中输入地址'http://b.cl.com:8080/';
-
由于出现跨域，故结果如下：
Paste_Image.png
此处是我的全部代码链接
二、JSONP
- jsonp.js
//此处省略，请看完整代码链接
else {//跨域，使用JSONP
let wholeUrl = opts.url + '?' + convert(opts.data);
addScript(wholeUrl);//和后端约定一个回调方法
}
//JSONP
const addScript=(wholeUrl)=>{
let nodeScript = document.createElement('script');
nodeScript.src = wholeUrl;
$('head').appendChild(nodeScript);
$('head').removeChild(nodeScript);
}
//后端返回结果的回调方法
const onJsonpResult =(json)=>{
console.log('jsonp:', json,json.length);
addItems(json);
};
2.router.js
app.get('/more', (req, res) => {
let cb = req.query.callback;
let firstNum = parseInt(req.query.curNum) + 1,
arr = [];
for (let i = 0; i < 5; i++) {
arr.push("内容" + (firstNum + i));
}
if (cb) {
res.send(cb + '(' + JSON.stringify(arr) + ')');
} else {
res.send(arr)
}
});
3.效果：
Paste_Image.png
三.CORS
- 在router.js中加入如下接口，其它代码不变
app.get('/more1',(req,res)=>{
let firstNum = parseInt(req.query.curNum) + 1,
arr = [];
for (let i = 0; i < 5; i++) {
arr.push("内容" + (firstNum + i));
}
res.header("Access-Control-Allow-Origin", "http://b.cl.com:8080");
//res.header("Access-Control-Allow-Origin", "*"); //允许所有
res.send(arr)
});
-
效果：
Paste_Image.png
四.降域：（作用在iframe和当前界面）
核心代码：document.domain = 'cl.com';
五.postMessage：（作用在iframe和当前界面）
核心代码：
//当前界面
const $ = (str) => document.querySelector(str);
$('input').addEventListener('input', () => {
window.frames[0].postMessage($('input').value, '*');
});
window.addEventListener('message',(e)=>{
console.log(e);
$('input').value = e.data;
});
//子界面（iframe中）
const $ = (str) => document.querySelector(str);
$('input').addEventListener('input', ()=>{
window.parent.postMessage($('input').value,'*');
});
window.addEventListener('message',(e)=>{
$('input').value = e.data;
});
