CORS前奏
了解CORS跨域之前,也许我们还应该对跨域这么个东东的一些概念要有些了解。
1. 什么是跨域
广义上的跨域是指一个 域下的文档或脚本试图去请求另一个域下的资源。比如: 资源跳转(a链接)、资源嵌入(link, script)、脚本请求(js发起ajax请求)等。而我们通常所讨论的跨域是指的是狭义上的跨域,指的是由浏览器同源策略限制的一类请求场景。那么什么是同源策略,同源策略又限制了什么。
2. 什么是同源策略
同源指的是如果两个页面的协议,端口和域名都相同,则两个页面具有相同的源,只要其中之一不同,则那这两个源就不相同。
3. 同源策略限制了什么
- Cookie、LocalStorage 和 IndexDB 无法读取。
- DOM 无法获得(内嵌iframe中,父子页面不能获取DOM)。
- AJAX 请求不能发送。
4. 为什么有同源策略的限制
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
- Cookie、LocalStorage 和 IndexDB 无法读取限制。(原因比如:访问一个恶意网站,获取到所有网站下的cookie信息, 如果有某个已登录的网站, 登录验证放在cookie里, 那就可以伪装你的身份去访问该 网站。)
- DOM 无法获得(内嵌iframe中,父子页面不能获取DOM)。(原因比如:一个恶意 网站,iframe嵌入一个正规网站的, 这样就可以获取到用户的登录信息和密码。 )
- AJAX 请求不能发送。 (原因比如: 没限制直接就可以用脚本把服务器给打爆了。)
5. 解决跨域的方法
- JSONP
- location.hash
- document.domain
- window.name
- window.postMessage
- WebSocket
- CORS 接下来要重点讨论下的是CORS是如何解决ajax请求跨域的。
CORS正文
CORS(跨域资源共享)是一种机制,允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行。CORS的使用要浏览器和服务端同时支持,并配合使用, IE要大于10。
1. 怎么工作的
2. CORS的简单请求和复杂请求
简单请求需要同时满足以下两个条件:
- 请求是以下方法之一: GET、HEAD、POST
- 不得人为设置以下集合之外的其他首部字段:
Accept
Accept-Language
Content-Language
Content-Type (需要注意额外的限制):
(text/plain
multipart/form-data
application/x-www-form-urlencoded)
复制代码
非简单请求就认为是复杂请求(比如PUT、DELETE请求, content-type设置为appliction/json等), 就需要发送预检请求。
3. CORS是如何工作的(如何确定是否允许跨域)
确定是否允许跨域就需要浏览器和服务器共同协作完成,主要就是通过特定的一些响应头来完成。预检请求还需要有特定的请求头。那么特定请求头分别有哪些以及是如何配合使用的。
######a. 服务端响应头
- Access-Control-Allow-Origin:这个字段是必须的,代表的是允许跨域的源, '*'代表任意的源。
- Access-Control-Allow-Methods: 这个字段也是必须的, 代表允许跨域的http请求方法。
- Access-Control-Allow-Credentials: 非必须的, 表示是否允许发送cookie, 默认是false,如果设置为true则同时还需要客户端要设置xhr.withCredentials = true才能起作用, 两者是共存的(其中的cookie带的是目标域的cookie)。
- Access-Control-Allow-Headers: 非必须的,表示允许的请求头, 如果预检请求中包括了Access-Control-Request-Headers, 则服务端必须设置该字段。
- Access-Control-Max-Age:非必须的,用来指定本次预检请求的有效期,单位为秒。即将CORS的响应配置缓存在浏览器端, 在缓存生效时间内,下次请求不用发送预检请求。 需要注意的是: 浏览器的disable-cache要关掉
- Access-Control-Expose-Headers:可选字段, 客户端只能根据响应获取到以下的响应头:
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
复制代码
如果想要获取额外的响应头信息, 则需要将其设置在这个字段中。
b. 客户端预检请求头
- Access-Control-Request-Method: 该字段是必须的,用来表示览器的CORS请求会用到哪个HTTP方法。
- Access-Control-Request-Headers: 该字段是非必须的,指定浏览器CORS请求额外发送的头信息字段。
针对简单请求情况:
不会发送预检请求, 直接是发起真正的请求,只要 Access-Control-Allow-Origin与Access-Control-Allow-Methods正确的设置就能发起请求。
具体的coding例子:github传送门