跨域的几种方法

2017-07-16 本文已影响0人祝余_scrapy

同源策略

浏览器出于安全方面的考虑，为了保证用户信息的安全，防止恶意的网站窃取数据。只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
而同源指的是：
同协议：如都是http或者https
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是80端口
所以只要协议、域名、端口有任何一个不同，都被当作是不同的域。

跨域的方法

1 JSONP

JSONP的全称：JSON with Padding，它是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。
JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

在HTML中通过添加一个<script>元素，向服务器请求JSON数据，并定义回调函数

直接设置<script>
<script src="http://example.com/getNews?callback=foo"></script>   //foo是回调函数 

还可以通过DOM来创建<script>
  $('.change').addEventListener('click', function(){      //绑定click事件
    var script = document.createElement('script');          //创建<script>元素
    script.src ="http:example.com/getNews?callback=foo";        //设置src属性，形成url
    document.head.appendChild(script);     // 添加<script>
    document.head.removeChild(script);     //删除<script>
  })

function foo(){       //定义回调函数
  code      //处理得到的数据
}

服务器端也需要进行相应的设置，回传数据

app.get('/getNews', function(req, res){

    ...


    var cb = req.query.callback;
    if(cb){
        res.send(cb + '('+ JSON.stringify(data) + ')');  //如果有回调函数，返回 foo(JSON数据)
    }else{
        res.send(data);   //返回默认数据
    }   
    
})

服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了回调函数，该函数就会立即调用。

优缺点

优点：JSONP不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

缺点：JSONP只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

2 CORS

CORS全称是"跨域资源共享"（Cross-origin resource sharing）,定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通，支持IE10以上的浏览器。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

服务器端设置Access-Control-Allow-Origin

res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");   //接受'http://a.jrg.com:8080'的请求
res.header("Access-Control-Allow-Origin", "*");     //接受任何域名的请求

此外，CORS请求分成两类：简单请求和非简单请求。浏览器对这两种请求的处理，是不一样的。具体参考阮老师的博客

3 降域

不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法。比如以下a.html中有个b.html子页面，因为它们域名不同，两者之间无法进行交互。我们可以通过设置document.domain，让两者的域名相同。

//a.html
<input type="text" placeholder="http://a.jrg.com:8080/a.html">
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>


<script>
document.querySelector('.main input').addEventListener('input', function(){
  console.log(this.value);
  window.frames[0].document.querySelector('input').value = this.value;
})
document.domain = "jrg.com"  //设置主域名为jrg.com
</script>

//b.html
<input id="input" type="text"  placeholder="http://b.jrg.com:8080/b.html">

<script>
document.querySelector('#input').addEventListener('input', function(){
  window.parent.document.querySelector('input').value = this.value;
})
document.domain = 'jrg.com';  //设置主域名为jrg.com
</script>

document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。修改document.domain的方法只适用于不同子域的框架间的交互。

4 postMessage

HTML5为了解决跨域窗口的通信问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。

otherWindow.postMessage(message, targetOrigin, [transfer]);  //postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。

//父元素a.html
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>

window.frames[0].postMessage('Hello World!', 'http://b.jrg.com:8080/b.html');   //向b.html发送'Hello World!'

window.addEventListener('message', function(e) {
  console.log(e.data);   //监听到并打印出'Nice to see you'
},false);

//子元素b.html
window.parent.postMessage('Nice to see you', 'http://a.jrg.com:8080/a.html'); //向a.html发送'Nice to see you'

window.addEventListener('message', function(e) {
  console.log(e.data);   //监听到并打印出'Hello World!'
},false);