How does Access-Control-Expose-Headers work?


I understand it determines the headers the client can access from the server response, however, I am confused on exactly when this is applied. Does it determine the headers for every cross-origin request that is allowed by the Access-Control-Allow-Origin header?

To test this I setup a test site in express and put the following code in it:

    res.set('Access-Control-Allow-Origin','') // to be able to make a cross-origin request
    res.set('foo', 'bar') //custom header that should get filtered because i havent set the access-control-expose-headers header
    res.send('Hello world')

Based on my understanding of this, because I haven’t set any special Access-Control-Expose-Headers header in the response, the client should only be able to access CORS-safelisted response headers and therefore should not be able to see my foo header.

But when I’m at (Which I allowed for CORS with the Access-Control-Allow-Origin header) and send a GET request to my test site I see the foo header in the response just fine. Why is this? Could someone explain how this works or at least point me in the right direction? Thanks in advance.


I figured it out. The reason I was receiving my custom header was that I was reading the response headers in the Network tab of Chrome Dev Tools. When I run this script:

  .then(r => {console.log(response.headers.get('foo'))})

It prints null. So the header is not actually accessible to the fetch request, only to the Dev Tools.

Answered By – Daavee18

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published