企业官网建设流程全解析

• 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 请求

总结

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

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