CORS 的全称是 Cross-origin resource sharing，中文名称是跨域资源共享，是一种让受限资源能够被其他域名的页面访问的一种机制。

下图描述了 CORS 机制。

一、源（Origin）的定义

上图中的 ① 描述了源（Origin）。源（Origin）由 URI 的协议（Protocol）、域名（domain）和端口（Port）组成，如下图所示。

不同源的访问请求叫做跨源请求（Cross Origin Requests），通常情况下，这种访问的请求会被浏览器拦截。

二、如何进行跨域访问

可以进行跨域访问的请求有两种，一种是简单的跨域请求（Simple Cross-Origin Request），另一种是预检请求（Pre flight request）。

2.1 简单的跨域请求（Simple Cross-Origin Request）

无需触发预检请求（Pre flight request）的请求，称为简单的跨域请求（Simple Cross-Origin Request）。满足下列条件的请求，可视为简单请求：

• 请求方法是 GET、HEAD、POST 其中之一
• 请求头 Content-Type 是 text/plain、multipart/formdata、application/x-www-form-urlencoded 其中之一

2.2 预检请求（Pre flight request）

预检请求（Pre flight request）是跨域资源共享（CORS）的一种预检机制。在进行跨域请求时，浏览器首先会发起一个 OPTIONS 请求，该请求称为预检请求，用于检查实际请求是否可以被服务器接受。预检请求中包含了实际请求将会用到的 HTTP 方法、Header 信息、请求 Path 等。

服务器在接收到预检请求后，会根据请求头中的 Origin 字段和请求内容，判断是否允许当前的跨域请求。如果允许，服务器会在响应头中添加
Access-Control-Allow-Origin 相关信息。

整个过程如下图所示：

解释一下图中出现的其他 Header 字段：

1）Access-Control-Allow-Methods

Access-Control-Allow-Methods 表示服务器允许的跨域请求的 HTTP 方法列表，如 GET、POST、PUT、DELETE 等。

2）Access-Control-Allow-Headers

Access-Control-Allow-Headers 表示服务器允许的跨域请求的头信息列表，如 Authorization、Cache-Control、Content-Type 等。

3）Access-Control-Max-Age

Access-Control-Max-Age 字段用于指定预检请求的缓存时间，单位为秒。一旦服务器端设置了 Access-Control-Max-Age 字段，浏览器在缓存期内会自动跳过预检请求，直接发起携带身份凭证的实际请求。这样可以降低服务器的压力，提升页面加载速度和用户体验。

预检请求（Pre flight request）成功后，就可以开始跨域访问了。

2.3 进行跨域访问

客户端发起跨域请求，在收到服务端的响应请求后，浏览器会检查响应头中的
Access-Control-Allow-Origin 字段，如果它的值是 messanger.com 或者是 '*'，浏览器会执行成功请求的回调，但是如果不匹配的话，则执行失败请求的回调。

2.4 跨域发送身份凭证

当客户端与服务器端进行跨域请求时，如果需要在跨域请求中发送身份凭证（如 cookie 和 HTTP 认证信息），则需要在服务器端设置
Access-Control-Allow-Credentials 字段为 true，才能使客户端发送跨域请求时携带身份凭证。如果服务器端未响应
Access-Control-Allow-Credentials 或设置为 false，则浏览器会丢弃这个请求，从而导致无法进行跨域资源分享。

（本文完）

文章首发于 studeyang.tech，原文链接：
https://studeyang.tech/2023/12.html

References

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS