vue2学习计划1-2 浏览器跨域问题

来源:互联网 发布:圣塔克拉拉大学 知乎 编辑:程序博客网 时间:2024/06/07 18:29

最近学习vue2,对网上的看到的内容和自己看到vue组件源码,进行记录。
过去跨域都是用JSONP, window.name,postMessage() 等方法模拟,但都不是很纯粹的AJAX解决方案。
参考文章 http://blog.csdn.net/zzk220106/article/details/71214495

先上vue-resource 上的实例
这里写图片描述

这里写图片描述

这里写图片描述

XHR Level2
HTML5中 XMLHttpRequest Level 2 的推出。可以通过在返回的HTTP请求头中加入 Access-Control-Allow-Origin 的设置,让浏览器支持对不同域的AJAX请求。这个情况下前端AJAX的代码不用做任何更改,只需要在服务端的返回中设置以下头信息即可:

Access-Control-Allow-Origin: * //*代表任何域。也可以指定地址

Access-Control-Allow-Methods: POST,GET //支持的方法

另外XHR2也带有更多高级功能,例如progress进度,文件上传,获取二进制数据等。详见 https://dev.opera.com/articles/xhr2/

XDR (IE 8-9 Only)
对于XHR2,IE浏览器的支持是IE10以上。但是IE早在IE8时就推出了 XDomainRequest 对象进行跨域操作,一直沿用到IE10才被取代掉。因此在IE8,IE9中应该使用 XDomainRequest (XDR)来实现。

XDR在创建时是通过 new XDomainRequest() 进行创建。其他操作和XHR有细微差别。比如open方法只有method和url两个参数,XDR只支持异步不支持同步操作。详细见文档: XDomainRequest object

var xdr = new XDomainRequest();
xdr.open(“get”, “http://www.example.com“);
xdr.onload = function() {
//success(xdr.responseText);
}
xdr.send();
另外使用XDR时也需要服务器端设置上面提到的 Access-Control-Allow-Origin 头信息。

1 0
原创粉丝点击