HTTP Response中的CORS Headers

• Access-Control-Allow-Credentials
• Access-Control-Allow-Methods
• Access-Control-Allow-Origin
• Access-Control-Max-Age

这四个都是 CORS（Cross-Origin Resource Sharing，跨域资源共享） 机制中的 HTTP Response Header，用来告诉浏览器是否允许来自其他域名的网页访问当前服务器资源。

假设有这样一个场景：

前端（浏览器）
https://app.example.com
        │
        │ AJAX / fetch()
        ▼
后端 API
https://api.example.com

由于域名不同（app.example.com 和 api.example.com），浏览器会认为这是跨域请求 ，这时候服务器需要返回一些 Access-Control-* 响应头。

---

1. Access-Control-Allow-Origin

这是最重要的 CORS Header。

它告诉浏览器：

哪些网站可以访问我的资源？

例如：

Access-Control-Allow-Origin: https://app.example.com

表示：

只有

https://app.example.com

这个网站可以访问 API。

例如：

GET https://api.example.com/user

浏览器收到 Response：

HTTP/1.1 200 OK

Access-Control-Allow-Origin: https://app.example.com

浏览器发现：

自己的 Origin 是

https://app.example.com

和 Response 一致。

于是：

✅ 允许 JavaScript 读取 Response。

---

如果服务器返回

Access-Control-Allow-Origin: *

表示：

任何网站都可以访问。

例如：

https://google.com
https://facebook.com
https://abc.com

都可以调用。

---

如果没有这个 Header：

(no Access-Control-Allow-Origin)

浏览器会直接报：

Access to fetch at ...
has been blocked by CORS policy

---

2. Access-Control-Allow-Methods

这个 Header 告诉浏览器：

允许哪些 HTTP Method。

例如：

Access-Control-Allow-Methods:
GET, POST, PUT, DELETE

表示：

允许：

GET
POST
PUT
DELETE

不允许：

PATCH
OPTIONS
TRACE

例如：

浏览器想发送：

DELETE /user/123

浏览器先会问服务器：

OPTIONS /user/123

服务器回答：

Access-Control-Allow-Methods:
GET, POST

浏览器发现：

DELETE 不在里面。

于是：

❌ 不允许发送 DELETE。

---

3. Access-Control-Allow-Credentials

这是很多人容易搞混的 Header。

它表示：

是否允许浏览器携带身份信息（Credentials）。

Credentials 包括：

• Cookie
• Session
• TLS Client Certificate
• HTTP Authentication

例如：

浏览器：

fetch(url, {
    credentials: "include"
})

浏览器会带上：

Cookie:
SESSIONID=abc123

但是服务器必须回答：

Access-Control-Allow-Credentials: true

浏览器才允许：

✅ 带 Cookie。

---

如果服务器返回：

Access-Control-Allow-Credentials: false

或者没有：

Access-Control-Allow-Credentials

浏览器会：

❌ 不发送 Cookie。

---

注意：

这个 Header 不能和

Access-Control-Allow-Origin: *

一起使用。

例如：

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

浏览器会认为：

非法！

因为：

不可能允许所有网站都携带你的 Cookie。

所以：

如果允许 Credentials，

必须明确写：

Access-Control-Allow-Origin:
https://app.example.com

不能写：

*

---

4. Access-Control-Max-Age

这个 Header 表示：

浏览器可以缓存 Preflight（OPTIONS）请求多久。

例如：

第一次：

浏览器：

OPTIONS /api/user

服务器：

Access-Control-Allow-Origin:
https://app.example.com

Access-Control-Allow-Methods:
GET, POST

Access-Control-Max-Age:
600

表示：

600 秒

也就是：

10 分钟。

浏览器会记住：

GET
POST
允许

以后：

10 分钟内再发：

GET
POST

浏览器：

不会再发 OPTIONS。

直接发：

GET

节省一次网络请求。

---

如果：

Access-Control-Max-Age: 86400

表示：

24 小时

浏览器一天内不会再问。

---

四个 Header 的关系

浏览器发起跨域请求时，大致流程如下：

Browser
    │
    │ OPTIONS（Preflight）
    ▼
Server

服务器返回：

Access-Control-Allow-Origin:
https://app.example.com

Access-Control-Allow-Methods:
GET, POST

Access-Control-Allow-Credentials:
true

Access-Control-Max-Age:
600

浏览器逐项检查：

Origin 是否允许？
        │
        ▼
Method 是否允许？
        │
        ▼
是否允许 Cookie？
        │
        ▼
缓存多久？

全部通过后：

真正发送 GET / POST 请求

---

总结

Header	作用	示例
Access-Control-Allow-Origin	指定哪些源（Origin）可以访问资源	https://app.example.com、*
Access-Control-Allow-Methods	指定允许的 HTTP 方法	GET, POST, PUT, DELETE
Access-Control-Allow-Credentials	是否允许浏览器携带 Cookie、Session 等身份凭据	true
Access-Control-Max-Age	浏览器缓存预检（Preflight）结果的时间（秒）	600、86400

可以把这四个响应头理解成一组权限控制：

• Allow-Origin ：谁可以访问？
• Allow-Methods ：可以执行什么操作？
• Allow-Credentials ：访问时能不能携带身份凭据（Cookie、Session 等）？
• Max-Age ：这些规则浏览器可以缓存多久，避免重复发送预检请求。