简单聊聊：同源、跨域、CORS、JSONP

跨域

说到跨域，有跨就要有同，我们需要先了解一下同源

源

什么是源，当我在网页开发者模式输入F12然后 window.origin 时，会得到一串数据

，这个就是源

源 = 协议 + 域名 + 端口号 

如果两个rul完全一致，那么这个就叫同源， www.baidu.com !== baidu.com 。

同源策略

同源策略就是：不同源的页面之间，不准互相访问数据。

所以 跨域 就是

不同域名、不同端口、不同IP之前进行相互的数据访问。

 

如何 跨域 ？

两种方式：

• CORS
• JSONP

CORS

想要跨域访问也很简单只需要在后台的数据请求中写入

response.setHeader(’Access-Control-Allow-Origin':'https://xxx.com');//写上对应的网址

JSONP

• JSONP是什么：是请求跨域访问的解决方案，通过创造一个script标签 , 这个script标签引用合作网站对应的JS文件，JS就会把数据夹带过来，我们拿到数据
• 优点：兼容IE、可以跨域
• 缺点：由于它是script标签，它读不到状态码，也不知道响应头是什么？，只知道成功失败，
•           只能发get请求，不支持post请求。

例如：

我们自己网站创建一个JS文件，动态创建script引用合作网站的JS文件，我们先封装JSONP

// 封装JSONP用Promise
function jsonp(url) {
    return new Promise((resolve,reject) =>{
        const random = 'flightyang'+Math.random();  //随机生成回调名字
        console.log(random);
        window[random] = (data)=>{
            resolve(data); //成功获取到另一个网站的数据
        };
        const script = document.createElement('script');
        script.src = `${url}?callback=${random}`; //自己设置回调名字
        script.onload = ()=>{  //成功后执行
            script.remove();  //删除掉script标签，我们主要目的是为了获取数据，让首页更加简洁
        };
        script.onerror = ()=>{ //失败
            reject();
        };
        document.body.appendChild(script);
    });
};

//使用JSONP发送请求
jsonp('http://qq.com:8888/friends.js')
    .then((data)=>{
        console.log(data);
    })

 

合作网站的后台

if(path === '/friends.js'){
    /*检查referer,判断只有frank.com网站能访问当前JS */
    if(request.headers["referer"].indexOf("http://frank.com:9990") === 0){
      response.statusCode = 200
      response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
      const string = fs.readFileSync('./public/friends.js').toString();  //读取JS文件--window['{{xxx}}']({{data}})--JS文件的内容
      const data = fs.readFileSync('./public/friends.json').toString();  //读取对应JSON文件的数据JSON，转换成字符串
      /*替换JS里回调名字：xxx给重命名：functionName，并把数据填充到{{data}}里 */
      const string2 = string.replace("{{data}}",data).replace('{{xxx}}',query.callback);
      response.write(string2);
      response.end(); //发送数据
    }else{
      response.statusCode=404;
      response.end();
    }

 

如此，我们就读取到合作网站传递过来的数据。