CORS（跨域资源共享）是一个系统，由传输 HTTP 标头组成，用于确定浏览器是否阻止前端 JavaScript 代码访问跨域请求的响应。

同源安全策略禁止跨域访问资源。 但是 CORS 使 Web 服务器能够表示他们希望选择允许跨域访问其资源。

![](https://img-blog.csdnimg.cn/img_convert/d8e14c284372ccbbe0a2eaa9865d1f02.png)

![](https://img-blog.csdnimg.cn/img_convert/48e6c41be0a73789f163da4e934e9e18.png)

# Access-Control-Allow-Methods

指定在访问资源以响应预检请求时允许的一种或多种方法。上面的例子为 POST.

# Access-Control-Allow-Headers

用于响应预检请求，以指示在发出实际请求时可以使用哪些 HTTP 标头。上面的例子为 content-type.

CORS 预检请求(preflight)是一个 CORS 请求，用于检查 CORS 协议是否被理解以及服务器是否使用特定的方法和标头知道。

这是一个 OPTIONS 请求，使用三个 HTTP 请求标头：Access-Control-Request-Method、Access-Control-Request-Headers 和 Origin 标头。

预检请求由浏览器自动发出，在正常情况下，前端开发人员不需要自己制作此类请求。 它出现在请求被限定为“预检”并且对于简单请求被省略时。

例如，在发送 DELETE 请求之前，客户端可能会通过使用预检请求询问服务器是否允许 DELETE 请求：

```shell
OPTIONS /resource/foo
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org
```

如果服务器允许，那么它将使用 Access-Control-Allow-Methods 响应标头响应预检请求，其中列出了 DELETE：

```shell
HTTP/1.1 204 No Content
Connection: keep-alive
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400
```

可以选择使用 Access-Control-Max-Age 标头为在同一 URL 中创建的请求缓存预检响应，如上例所示。 为了缓存预检响应，浏览器使用与浏览器管理的通用 HTTP 缓存不同的特定缓存。 预检响应永远不会缓存在浏览器的通用 HTTP 缓存中。

对于上图 Spartacus 系统的例子，服务器允许跨域访问：
![](https://img-blog.csdnimg.cn/img_convert/43294fecab8055d98c96c1d5d2b4d458.png)

ITPub博客

SAP 电商云 Spartacus UI 客户系统的跨域请求

最新文章