1. Cross-Origin Resource Sharing (CORS) is a mechanism that uses an extra HTTP header to tell the browser that lets Web applications are granted access to resources from different sources specified on the server
2, for example, XMLHttpRequest and Fetch API follows the same-origin policy. This means that the use of these API Web applications can request resources from the same domain HTTP load the application,
Unless the response packet contains the correct CORS response headers
3, need CORS under what circumstances?
Fetch initiated by cross-domain XMLHttpRequest or HTTP request.
Web fonts (by using CSS @ font-face font resources across domains), so that the site can publish TrueType font resource, and allow only authorized site conduct cross-site calls
WebGL textures
The use drawImage Images / video screen drawing on the canvas
4, the standard cross-domain resource sharing that could produce adverse effects on the data to the server HTTP request method (in particular, other than the GET HTTP request, or with a certain MIME type POST request),
The browser must first initiate a pre-screening method using the OPTIONS request, in order to know the server whether to allow the cross-domain requests. After allowing the server to confirm,
Before initiating the actual HTTP request. Preflight return request, the server can inform the client,
The need to carry identity documents (including Cookies and HTTP authentication-related data)
Simple request
Some requests do not trigger CORS preflight request, saying that such a request is a simple request
If the request satisfies all of the following conditions, then the request as a simple request:
Use one of the following methods:
GET
HEAD
POST
Fetch specification defines security for CORS header field collection, not artificially set other header fields outside the set. The collection is:
Accept
Accept-Language
Content-Language
Content-Type (Note that additional restrictions)
DPR
Downlink
Save-Data
Viewport-Width
Width
Content-Type 的值仅限于下列三者之一：
text/plain
multipart/form-data
application/x-www-form-urlencoded
预检请求
要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，预检请求 的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。
当请求满足下述任一条件时，即应首先发送预检请求：
使用了下面任一 HTTP 方法：
PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH
人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为：
Accept
Accept-Language
Content-Language
Content-Type (需要注意额外的限制)
DPR
Downlink
Save-Data
Viewport-Width
Width
Content-Type 的值不属于下列之一:
application/x-www-form-urlencoded
multipart/form-data
text/plain
HTTP 响应首部字段
Access-Control-Allow-Origin
Access-Control-Allow-Origin: '*' 允许所有网站请求
Access-Control-Allow-Origin: 'www.baidu.com' 允许百度网站请求
Access-Control-Expose-Headers
在跨域访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，
Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，
如果要访问其他头，则需要服务器设置本响应头
Access-Control-Max-Age
Access-Control-Max-Age: '1000' 1000秒内再发送请求不用在发送预请求
Access-Control-Allow-Credentials
指定了当浏览器的credentials设置为true时是否允许浏览器读取response的内容
Access-Control-Allow-Methods
用于预检请求的响应，其指明了实际请求所允许使用的 HTTP 方法
Access-Control-Allow-Headers
用于预检请求的响应，其指明了实际请求中允许携带的首部字段
HTTP 请求首部字段
无须手动设置，当开发者使用 XMLHttpRequest 对象发起跨域请求时，它们已经被设置就绪
Origin
表明预检请求或实际请求的源站
Access-Control-Request-Method
用于预检请求，将实际请求所使用的 HTTP 方法告诉服务器
Access-Control-Request-Headers
用于预检请求，将实际请求所携带的首部字段告诉服务器
附带身份凭证的请求
浏览器不会发送身份凭证信息。如果要发送凭证信息，需要设置 XMLHttpRequest 的某个特殊标志位
XMLHttpRequest 的 withCredentials 标志设置为 true，从而向服务器发送 Cookies。
因为这是一个简单 GET 请求，所以浏览器不会对其发起 预检请求。但是，如果服务器端的响应中未携带 Access-Control-Allow-Credentials: true，
浏览器将不会把响应内容返回给请求的发送者。