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.