这篇文章纯属湿货。
随着MVVM框架的大行其道,前端接触网路请求的机会越来越普及。
跨域也开始成为开发的家常便饭。
跨域处理方法有以下几点:
- iframe
- script(JSONP)
- cors
iframe是N年前 的东西,在邮件网站上可以看到它的影子
JSONP一直都存在,在PC上没兼容问题,并且使用方便,局限是只能通过get方式发送数据
CORS可以让前端在某些情况下可以像不跨域一样请求数据,所以我们这篇只说它。
CORS配置主要在后端
可以参考:阮一峰的博客
IE8&IE9上不能使用XMLHttpRequest来通过cors来处理跨域,他们提供了一个特别的对象XDomainRequest来处理CORS跨域通讯。
可以参考:CORS
它的回掉函数和XMLHttpRequest基本一致,这里不重叙。
下面只要说几个坑点:
1.要保持请求协议和当前访问网站的协议一致。
例如:浏览器地址栏的协议是https,那么你的XDomainRequest只能发起https请求,否则“拒绝访问”
2. 如果你使用vue同时使用CORS,想要兼容IE8!不用多想了。
XDomainRequest是支持IE8 CORS的,但是vue不支持,这个锅并不是XDomainRequest的,XDomainRequest不背(●'◡'●)。
贴代码:
return new Promise((resolve, reject) => {
let appliance = new window.XDomainRequest()
appliance.onprogress = function () { }; // no aborting
appliance.ontimeout = function () {
// alert("timeout")
reject({ eror: "timeout" });
}; // "
appliance.onload = function (e) {
// do something with appliance.responseText
// alert("onload" + appliance.responseText)
resolve(appliance.responseText);
};
appliance.onerror = function (e, b) {
// error handling
// alert("error" + JSON.stringify(e) + JSON.stringify(b))
reject({ eror: e });
};
//appliance.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
appliance.withCredentials = true; // to support sending cookies with CORS
appliance.open("POST", axios.defaults.baseURL + url);
appliance.send(dataToString);
});
2018-05-31更新:
可以发送请求,但是无法携带数据