支持POST的跨域请求CORS

时间：2022-08-28 23:37:24

关于跨域请求在之前已经总结了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一样了！
标签：

相关文章