目录
引子
CORS
全称 Cross-Origin Resource Sharing,跨源资源共享,是跨域的解决方案之一,里面有不少的知识点,在此集中整理。
简介
浏览器的同源策略是一个重要的安全机制,不同源的客户端在没有授权的情况下,不能够访问对方的资源。同源的定义是访问链接的协议、域名和端口号均相同。在实际应用中,合理的跨域请求对于一些应用程序也很重要, CORS 标准定义了在访问跨域资源时,浏览器与服务器应该如何沟通。CORS 的基本思想是使用 HTTP 头部让浏览器与服务器进行沟通,从而决定请求是否能够成功。
CORS 标准中新增了一组 HTTP 首部字段,用于浏览器和服务器之间沟通。在跨域请求中,在一些情况下会有一个预检请求(preflight request),是用来检查是否允许这种类型的请求,这种请求使用 OPTIONS
方法。预检请求的使用,可以避免跨域请求对服务器的数据产生未预期的影响。接下来看看相关具体的内容。
Request Header
CORS 涉及以下的请求头:
Origin
表示跨域请求或预请求来自哪里。
Access-Control-Request-Method
在使用 OPTION
方法时会用到,表示对同一资源的将来跨域请求可能使用的方法。
Access-Control-Request-Headers
在使用 OPTION
方法时会用到,表示对统一资源将来跨域请求可能使用的请求头部。
Response Header
CORS 涉及以下响应头:
Access-Control-Allow-Origin
表示是否能够共享响应。如果服务器认为请求可以接受,就设置该头部为请求头的 Origin
信息或者 *
;如果没有这个头部,或者这个头部的信息跟请求的 Origin
信息不匹配,浏览器就会驳回请求。
Access-Control-Allow-Credentials
表示跨域请求是否提供凭据。默认情况下,跨域请求不提供凭据,设置该头部为 true
时,表示对应的请求应该发送凭据。如果服务器的响应中没有设置该头部,但发送的请求中带了凭据,浏览器会调用到 onerror
事件处理程序。如果是 fetch
请求,该值设置为 include
。
Access-Control-Allow-Methods
表示跨域请求支持的方法。
Access-Control-Allow-Headers
表示跨域请求支持的头部。
Access-Control-Max-Age
表示预请求可以缓存多长时间,以秒为单位。
Access-Control-Expose-Headers
通过列出其名称,指示哪些头部可以作为响应的一部分公开。
Preflight Request
上面有提到在一定条件下,会先触发预检请求,当请求满足下面任一条件时,就需要先发预检请求:
- 使用
PUT
、DELETE
、CONNECT
、OPTIONS
、TRACE
、PATCH
中任一方法。 - 人为设置了对 CORS 安全的首部字段集合之外的首部字段,该集合在正式标准中包含
Accept
、Accept-Language
、Content-Language
、Content-Type
(还有额外限制)。 Content-Type
的值不是application/x-www-form-urlencoded
、multipart/form-data
、text/plain
其中之一。- 请求中 XMLHttpRequestUpload 对象注册了事件监听器。
- 请求中使用了 ReadableStream 对象。
如果请求满足下面所有条件,就不会触发预请求:
- 使用
GET
、HEAD
、POST
方法之一。 - 不得人为设置对 CORS 安全的首部字段集合之外的首部字段,该集合在正式标准中包含
Accept
、Accept-Language
、Content-Language
、Content-Type
(还有额外限制)。 Content-Type
的值仅限application/x-www-form-urlencoded
、multipart/form-data
、text/plain
其中之一。- 请求中 XMLHttpRequestUpload 对象没有注册任何事件监听器。
- 请求中没有使用了 ReadableStream 对象。