011天之跨域资源共享CORS

Posted bbqq1314

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了011天之跨域资源共享CORS相关的知识,希望对你有一定的参考价值。

通过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():用于发送请求。

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

技术图片

以上是关于011天之跨域资源共享CORS的主要内容,如果未能解决你的问题,请参考以下文章

009天之跨浏览器的事件处理程序

Django之跨域请求

Django之跨域请求同源策略

sso单点登录之跨域cookie共享 (跨域缓存共享)

springboot之跨域访问cros,@CrossOrigin注解

js之跨域