HTTP Response中的CORS Headers

Access-Control-Allow-CredentialsAccess-Control-Allow-MethodsAccess-Control-Allow-OriginAccess-Control-Max-Age这四个都是CORSCross-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浏览器收到 ResponseHTTP/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 policy2. 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 包括CookieSessionTLS Client CertificateHTTP Authentication例如浏览器fetch(url, { credentials: include })浏览器会带上Cookie: SESSIONIDabc123但是服务器必须回答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 表示浏览器可以缓存 PreflightOPTIONS请求多久。例如第一次浏览器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 │ │ OPTIONSPreflight ▼ 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, DELETEAccess-Control-Allow-Credentials是否允许浏览器携带 Cookie、Session 等身份凭据trueAccess-Control-Max-Age浏览器缓存预检Preflight结果的时间秒600、86400可以把这四个响应头理解成一组权限控制Allow-Origin谁可以访问Allow-Methods可以执行什么操作Allow-Credentials访问时能不能携带身份凭据Cookie、Session 等Max-Age这些规则浏览器可以缓存多久避免重复发送预检请求。