011天之跨域资源共享CORS

Posted 2021-03-04 bbqq1314

通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略，默认情况下XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是，实现合理的跨域请求对于开发某些浏览器的应用也是非常important的。

CORS（Cross-Origin Resource Sharing,跨域资源共享）是w3c的一个工作草案，定义了在必须访问跨域资源时，浏览器和服务器应该如何沟通。CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器和服务器进行沟通，从而决定请求或响应的成功，失败。

比如一个简单的使用GET或POST发送的请求，它没有自定义的头部，而主体内容是text/plain。在发送该请求时，需要给它附加一个额外的Origin头部，其中包含请求页面的源信息（协议，域名和端口），以便服务器根据这个头部信息来决定是否给予响应。

Origin头部一个例子：

Origin :http://www.yk.com

如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息例如：

Access-Control-Allow-Origin:http://www.yk.com

如果没有这个头部，或者有这个头部但源信息不匹配，浏览器就会驳回请求。

那么有没有兼容所有浏览器的CORS呢？

来喽来喽

function createCORSRequest(method, url) {
    let xhr = new XMLHttpRequest();
    if("withCredentials" in xhr) {
        xhr.open(method,url,true)
    } else if(typeof XDomainRequest != ‘undefined‘) {
        xhr = new XDomainRequest();
        xhr.open(method, url)
    } else {
        xhr = null;
    }
    return xhr;
}
let request = createCORSRequest(‘get‘,"http://www.somewhere-else.com/page/");

if(request) {
    request.onload = function() {
        //对request.responseText进行处理
    };
    request.send();
}

createCORSRequest()函数返回的的对象中返回的属性和方法如下：

abort(): 用于停止正在进行的请求。 onerror:用于替代onreadystatechange检测错误。 onload:用于替代onreadystatechange检测成功。 responseText:用于取得响应内容。 send():用于发送请求。

扫码加群，每日更新一篇前端技术文章一起成长。