关于跨域请求在之前已经总结了JSONP方法,Fetch方法,还有XDM方法,但是这些方法都只支持GET方法,不支持POST方法,所以今天就来简单的总结下,关于支持POST方法的跨域请求如何实现。
一. CORS简介
CORS是Cross-Origin Resource Sharing的缩写,翻译过来就是,跨源资源共享。CORS的实现原理就是使用自定义的HTTP头部让浏览器和服务器进行沟通,从而决定请求或响应是否成功。它的实现对程序员来说是透明的,也就是在我们发起跨域请求时,浏览器会自动创建一个Origin字段,值就是我们要请求的域名。
(1)浏览器如何发送请求
比如我们要请求的域为:http://baidu.com,浏览器会自动将Origin:http://baidu.com这样的字段加入请求头中。
(2)服务器如何判断所要请求的域名是否合理
当服务器接收到客户端的请求后,服务器会将收到的域名和自己所能接受的域名进行比对,如果允许就添加Access-Control-Allow-Origin字段信息,值与客户端要请求的域名相同。
(3)浏览器如何判断请求是否成功响应
当服务器发来响应信息时,不能够通过HTTP的状态码是否为200来判断,因为无论是否成功都是200。这时浏览器会检测响应头中是否包含Access-Control-Allow-Origin字段,如果包含就成功,不包含就抛出错误,应该用onerror事件来捕获错误信息。
关于CORS的原理就是这些,下来看一下如何实现吧!
二. CORS的实现代码
CORS的实现和一般的AJAX请求代码没有多大的区别,因为它的内部实现对开发人员是透明的,只要浏览器和服务器允许就可以。
(1)检查浏览器是否支持CORS
这个很简单,当创建好XMLHttpRequest对象后,验证是否存在withCredentials属性是否存在即可。
var xhr = new XMLHttpRequest();
if ('withCredentials' in xhr == true){
//其他代码
}
设置xhr.withCredentials = true就可以上传Cookie信息,当然这也需要服务器进行相应的配置,服务器需要将Access-Control-Allow-Credent设为true才行。
(2)在IE浏览器中的实现
IE对CORS有自己的对象,即:使用var xdr = new XMLDomainRequest(),其他浏览器都是XMLHttpRequest对象来实现。xdr的open方法只有两个参数,请求类型(get/post)和URL,因为所有的xdr都是异步的,不支持同步请求。
(3)具体代码
function createCorsRequest(method, url){
var xhr = new XMLHttpRequest();
if ('withCredentials' in xhr){
xhr.open(method, url, true);
return xhr;
}else if (typeof XMLDomainRequest != 'undefined'){
xhr = new XMLDomainRequest();
xhr.open(method, url);
return xhr;
}
}
这样跨域请求对象就建好了,接下来的操作就和AJAX一样了!