跨域

一、准备阶段：

1. 安装部署server-mock

• npm install -g server-mock：安装server-mock
• mock init：生成3个文件
• mock start：开启服务

2. 更改localhost文件

• win10电脑下：C:\Windows\System32\drivers\etc\HOSTS，打开HOSTS文件
• 添加并保存：
  127.0.0.1 b.cl.com
  127.0.0.1 a.cl.com

3. 将XMLHttpRequest对象.open方法的url参数变为完整地址：如'http://a.cl.com:8080/more'；
4. 在浏览器中输入地址'http://b.cl.com:8080/';

5. 由于出现跨域，故结果如下：

   
   
   

   Paste_Image.png

此处是我的全部代码链接

二、JSONP

1. 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;
});