Can’t access cross-origin response header from frontend JavaScript

Question

I am building a simple web app using ReactJS and create-react-app.

I have a backend API set up on Heroku where I can make POST requests. Everything works fine, except:

When I make a POST request using fetch API, the response is 100% correct but it only gives me 2 standard headers. I want to get my custom header. I have added expose header in my response and here's the plot twist: When I view the headers from Chrome Inspection Tool or Postman (API tool), it shows all the headers, including my custom one. Here is the fetch code I'm using -

fetch(theUrl, {
  method: 'POST',
  body: JSON.stringify({
    "placeholder": "placeholder"
  })
})
.then(function(res) {
  console.log(res.headers.get('CUSTOM_HEADER_NAME'));
})

If it makes any difference, this fetch method is called from a function outside the main body of the ReactJS component.

The name of the custom header is Image-Identification-Path, and the header in my response header is Access-Control-Expose-Headers for Image-Identification-Path.

Summary: How do I get my custom header using fetch?

Is this a cross-origin request? When you say “I have added expose header in my response”, you mean you have added the name of the custom header to the value of the Access-Control-Expose-Headers response header? — sideshowbarker
– sideshowbarker, Commented Apr 3, 2017 at 2:36
Yes, it's a cross-origin request. I'm running my app on localhost right now. I tested this out by uploading my app on Heroku too, but it gives the same result. Also yes, I have added the name of the custom header to the value of the Access-Control-Expose-Headers response header. — Fahmid
– Fahmid, Commented Apr 3, 2017 at 2:58
Your screen shot shows you have the Image-Identification-Path header name in the value of the Access-Control-Allow-Headers header. You need to have it set in the value of the Access-Control-Expose-Headers header. (Access-Control-Allow-Headers is for listing custom request header names.) — sideshowbarker
– sideshowbarker, Commented Apr 3, 2017 at 4:14

sideshowbarker · Accepted Answer · 2021-08-21 00:59:03Z

11

You must configure the server to which the request is sent, such that its response has an Access-Control-Expose-Headers header that has the name of your custom response header.

Otherwise, if your browser doesn’t see the name of your custom header in that Access-Control-Expose-Headers header, it won’t let you access the value of your custom header.

In such a case it’s expected that you’d still be able to see the custom header if you look at the response in Postman or even in your browser devtools.

But just because the browser gets the custom header in the response doesn’t mean the browser will expose it to your frontend JavaScript code.

For cross-origin requests, browsers will only expose that custom response header to your frontend code if that header name is in the Access-Control-Expose-Headers value.

edited Aug 21, 2021 at 0:59

answered Apr 3, 2017 at 3:07

sideshowbarker

89.2k30 gold badges219 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Fahmid Over a year ago

Thanks for your answer but as I said in my question, I already did include the Access-Control-Expose-Headers header in my server response header.

sideshowbarker Over a year ago

So what is the name of your custom response header? And what’s the value of Access-Control-Expose-Headers? Please use stackoverflow.com/posts/43175710/edit to update/edit your question to include that information. Otherwise it’s hard for anybody here to imagine what the cause of the problem might be

Fahmid Over a year ago

For anyone facing the same problem, this answer is right, it's just that I added Access-Control-Allow-Headers instead of Access-Control-Expose-Headers

Fahmid Over a year ago

Just asking for knowledge - How is it that even without exposing, Google Chrome or Postman gets to see all the headers? Aren't they also just a client app?

sideshowbarker Over a year ago

Browsers enforce the same-origin policy on web apps, which are scoped to particular origins. Postman isn’t scoped to any particular origin—instead it’s a user-installed extension/add-on; it’s not an untrusted web app. So all other client apps—Postman and everything else other than browsers—don’t even have the concept of “origin”. That “origin” concept is a web-app thing, which has to do with the fact that web apps are hosted at particular web sites. Unlike a web app, Postman isn’t hosted at any particular website/origin.

|

Diego Ruiz · Accepted Answer · 2020-09-08 16:37:09Z

I know this question is old but I ran into this problem yesterday, and the given answer didn't work for me.

The solution I found was given in this article. Basically:

You can’t directly access the headers on the response to a fetch call - you have to iterate through after using the entries() method on the headers.

So, in your particular case you should be able to achieve the goal by using this code:

fetch(theUrl, {
  method: 'POST',
  body: JSON.stringify({
    "placeholder": "placeholder"
  })
})
.then(response => { 
  for (var pair of response.headers.entries()) { // accessing the entries
     if (pair[0] === 'CUSTOM_HEADER_NAME') { // key you're looking for, in your case Image-Identification-Path
        let imagePath = pair[1]; //// saving that value
     }
  }
  .... })

Collectives™ on Stack Overflow

Can’t access cross-origin response header from frontend JavaScript

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related