Open XXHolic opened 5 years ago
CORS 全称 Cross-Origin Resource Sharing，跨源资源共享，是跨域的解决方案之一，里面有不少的知识点，在此集中整理。
CORS
浏览器的同源策略是一个重要的安全机制，不同源的客户端在没有授权的情况下，不能够访问对方的资源。同源的定义是访问链接的协议、域名和端口号均相同。在实际应用中，合理的跨域请求对于一些应用程序也很重要， CORS 标准定义了在访问跨域资源时，浏览器与服务器应该如何沟通。CORS 的基本思想是使用 HTTP 头部让浏览器与服务器进行沟通，从而决定请求是否能够成功。
CORS 标准中新增了一组 HTTP 首部字段，用于浏览器和服务器之间沟通。在跨域请求中，在一些情况下会有一个预检请求（preflight request），是用来检查是否允许这种类型的请求，这种请求使用 OPTIONS 方法。预检请求的使用，可以避免跨域请求对服务器的数据产生未预期的影响。接下来看看相关具体的内容。
OPTIONS
CORS 涉及以下的请求头：
表示跨域请求或预请求来自哪里。
在使用 OPTION 方法时会用到，表示对同一资源的将来跨域请求可能使用的方法。
OPTION
在使用 OPTION 方法时会用到，表示对统一资源将来跨域请求可能使用的请求头部。
CORS 涉及以下响应头：
表示是否能够共享响应。如果服务器认为请求可以接受，就设置该头部为请求头的 Origin 信息或者 * ；如果没有这个头部，或者这个头部的信息跟请求的 Origin 信息不匹配，浏览器就会驳回请求。
Origin
*
表示跨域请求是否提供凭据。默认情况下，跨域请求不提供凭据，设置该头部为 true 时，表示对应的请求应该发送凭据。如果服务器的响应中没有设置该头部，但发送的请求中带了凭据，浏览器会调用到 onerror 事件处理程序。如果是 fetch 请求，该值设置为 include 。
true
onerror
fetch
include
表示跨域请求支持的方法。
表示跨域请求支持的头部。
表示预请求可以缓存多长时间，以秒为单位。
通过列出其名称，指示哪些头部可以作为响应的一部分公开。
上面有提到在一定条件下，会先触发预检请求，当请求满足下面任一条件时，就需要先发预检请求：
PUT
DELETE
CONNECT
TRACE
PATCH
Accept
Accept-Language
Content-Language
Content-Type
application/x-www-form-urlencoded
multipart/form-data
text/plain
如果请求满足下面所有条件，就不会触发预请求：
GET
HEAD
POST
目录
引子
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中任一方法。Accept、Accept-Language、Content-Language、Content-Type（还有额外限制）。Content-Type的值不是application/x-www-form-urlencoded、multipart/form-data、text/plain其中之一。如果请求满足下面所有条件，就不会触发预请求：
GET、HEAD、POST方法之一。Accept、Accept-Language、Content-Language、Content-Type（还有额外限制）。Content-Type的值仅限application/x-www-form-urlencoded、multipart/form-data、text/plain其中之一。参考资料
:wastebasket:
在下任我扯！ 最近看了《安徒生童话》里面的一篇《豌豆上的公主》，是个短篇，里面有2个点让我感觉很有意思。 首先是这个描写： > 城门上传来了敲门声，老国王亲自走去开了门。 嗯呢~~~想一想，传来了敲门声，国王就去开门，好像没什么问题，我们平时也是这么做的。但这是国王听到敲门声，就去开门，这可是国王呢，城门都没有人把守么？ 然后就是鉴别是否是真公主的方法：将一粒豌豆放在床上，然后再压上二十床垫子和二十床鸭绒被，公主睡了一晚上，第二天说睡的不好，因为她感觉到有个硬硬东西硌的她很不舒服。于是就认为除了真正的公主，任何人都不会有这么娇嫩的皮肤，能够感受到床底下的豌豆。 这皮肤的确是娇嫩的不得了！