Home > front end >  How does Access-Control-Expose-Headers work?
How does Access-Control-Expose-Headers work?

Time:06-03

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:

app.get('/',(req,res)=>{
    res.set('Access-Control-Allow-Origin','https://www.google.com') // 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 https://www.google.com (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.

CodePudding user response:

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:

fetch('http://127.0.0.1:3000/')
  .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.

  • Related