作者简介:大家好,我是撸代码的羊驼,前阿里巴巴架构师,现某互联网公司CTO
联系v:sulny_ann(17362204968),加我进群,大家一起学习,一起进步,一起对抗互联网寒冬
# 序言
跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷。
一、基本介绍
简单来说,CORS是一种访问机制,英文全称是Cross-Origin Resource Sharing,即我们常说的跨域资源共享,通过在服务器端设置响应头,把发起跨域的原始域名添加到Access-Control-Allow-Origin 即可。
1. CORS工作原理
CORS实现跨域访问并不是一蹴而就的,需要借助浏览器的支持,从原理题图我们可以清楚看到,简单的请求(通常指GET/POST/HEAD方式,并没有去增加额外的请求头信息)直接创建了跨域请求的XHR对象,而复杂的请求则要求先发送一个"预检"请求,待服务器批准后才能真正发起跨域访问请求。
来自维基百科
根据官方文档W3C规范-CORS 的描述,目前CORS使用了如下头部信息:
2. Request Headers(请求头)
温馨提示:Request Headers 无需人为干预,因为浏览器会自动识别跨域请求并添加对应的请求头。
-
Origin 表示发起跨域请求的原始域。
-
Access-Control-Request-Method 表示发起跨域请求的方式,例如GET/POST。
-
Access-Control-Request-Headers表示发起跨域请求的额外头信息。
3. Response headers(响应头 )
温馨提示:Response Headers 需要人为干预,通过设置响应头以帮助服务器资源进行跨域授权,例如允许哪些原始域进行跨域请求,是否允许响应信息携带Cookie等认证信息。
-
Access-Control-Allow-Origin 表示允许哪些原始域进行跨域访问。
-
Access-Control-Allow-Credentials表示是否允许客户端获取用户凭据。
使用场景:例如现在需要登录系统后才能发起跨域请求,并且要附带Cookie信息给服务器。则必须具备两个条件:
1. 浏览器端:发送AJAX请求前需设置通信对象XHR的withCredentials 属性为true。
2.服务器端:设置Access-Control-Allow-Credentials为true。两个条件缺一不可,否则即使服务器同意发送Cookie,浏览器也无法获取。
正确姿势如下:
$.ajax({
url: 'localhost:8080',
xhrFields: {
withCredentials: true //表示发起跨域访问并要求携带Cookie等认证信息
},
success: function (r) {
console.log(r)
}
});
有好奇的小伙伴可能会问为什么在W3C手册中找不到跨域属性xhrFields的描述,因为该属性并不是通信对象XHR的