【CORS】响应标头Allow-Headers和Expose-Headers的区别和用法

在HTTP响应头中，Access-Control-Allow-Headers 和 Access-Control-Expose-Headers 是两个与跨域资源共享（CORS）相关的标头，它们各有不同的用途：

Access-Control-Allow-Headers

这个响应头用于告知浏览器，服务器允许哪些HTTP请求头在实际的跨域请求中使用。当一个复杂的跨域请求（比如使用了非默认的HTTP方法如PUT、DELETE或者自定义的请求头）发起预检请求（OPTIONS方法）时，浏览器会将实际请求中将携带的所有非默认请求头在预检请求的Access-Control-Request-Headers字段中列出，服务器需要在Access-Control-Allow-Headers响应头中确认这些请求头是否被允许。

例如，如果客户端想要在请求中包含自定义的X-My-Custom-Header，服务器的响应中就需要包含这样的头：

Access-Control-Allow-Headers: X-My-Custom-Header, Content-Type

Access-Control-Expose-Headers

此响应头用来指定哪些响应头可以被浏览器暴露给JavaScript代码，即通过XMLHttpRequest或Fetch API访问。通常情况下，只有少数几个响应头（如Cache-Control、Content-Language、Content-Type等）是可以被前端JavaScript访问的。如果服务器希望客户端能够访问到其他响应头（例如自定义的X-Request-Id或X-Apig-Latency），就需要使用Access-Control-Expose-Headers来声明这些响应头。

例如，为了让客户端能够访问X-Request-Id和X-Apig-Latency，服务器应返回如下响应头：

Access-Control-Expose-Headers: X-Request-Id, X-Apig-Latency

总结来说，Access-Control-Allow-Headers控制的是请求中允许携带的头部，而Access-Control-Expose-Headers控制的是响应中允许暴露给前端脚本的头部。这两个标头共同协作，增强了Web应用程序在进行跨域通信时的安全性和灵活性。