Read header key value from the response header React Js

Question

console snapshotI am calling one fetch API which giving the response header 'key-name':'value'. I checked in the chrome developer tools network tab. It showing the value. However, I am trying to read it during API response it's showing empty. I tried multiple ways but still not working. Below is my code.

const requestOptions = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    pid: d,
                    cy: v
                }
                )
            };
                
  fetch('https://mysite/api/manage/', requestOptions)
                .then(res => res.json())
                .then(jsong => {
                    console.log(jsong);
            console.log(jsong.headers); 
                }).catch((err) => {
                    console.log(err);
                });

Please help. I added a console snapshot and network response snapshot as well. network response snapshot

I don't think header values will be in the JSON response body. Maybe check for them in the res response object. — Drew Reese
– Drew Reese, Commented Mar 18, 2021 at 6:45
yes. I am trying to read after the fetch request as well it's showing empty. — nitin kumar
– nitin kumar, Commented Mar 18, 2021 at 6:55

nitin kumar · Accepted Answer · 2021-03-20 18:35:42Z

3

I got the solution and here is the answer. It might be useful for someone

fetch('mysite.com/api/manage-cart/', requestOptions)
            .then(res => res.headers.get('cart_info')
            )
            .then(res => {
                window.localStorage.setItem("cartData", JSON.stringify(res));
            }).catch((err) => {
                console.log(err);
            }); .

I am storing the value on local storage for further use.

answered Mar 20, 2021 at 18:35

nitin kumar

732 silver badges7 bronze badges

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

1 Comment

Drew Reese Over a year ago

If all you needed to extract from the headers was the data you originally sent, why not just reference the data payload from requestOptions in the success handling?

Drew Reese · Accepted Answer · 2021-03-20 06:03:25Z

0

You can access the response header values from the returned response object res.

Fetch response headers

Headers

An object implementing Headers can directly be used in a for...of structure, instead of entries(): for (var p of myHeaders) is equivalent to for (var p of myHeaders.entries()).

fetch('https://mysite/api/manage/', requestOptions)
  .then(res => {
    for (let entry of res.headers) { // <-- response header iterable
      console.log(entry);
    }
    return res.json();
  })
  .then(data => {
    console.log(data); 
  }).catch((err) => {
    console.log(err);
  });

When manually making a request to "https://sandbox.zeroite.com/api/manage-cart/" these are the header entries output:

VM7366:11 (2) ["access-control-allow-credentials", "true"]
VM7366:11 (2) ["allow", "GET, POST, HEAD, OPTIONS"]
VM7366:11 (2) ["cart-info", "{'product_info': {'5': 1}}"]
VM7366:11 (2) ["connection", "Keep-Alive"]
VM7366:11 (2) ["content-language", "en"]
VM7366:11 (2) ["content-length", "203"]
VM7366:11 (2) ["content-type", "application/json"]
VM7366:11 (2) ["date", "Sat, 20 Mar 2021 05:53:28 GMT"]
VM7366:11 (2) ["keep-alive", "timeout=5, max=100"]
VM7366:11 (2) ["server", "Apache/2.4.18 (Ubuntu)"]
VM7366:11 (2) ["vary", "Accept,Accept-Language,Cookie,Origin"]
VM7366:11 (2) ["x-frame-options", "SAMEORIGIN"]

edited Mar 20, 2021 at 6:03

answered Mar 18, 2021 at 7:04

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

9 Comments

nitin kumar Over a year ago

I tried this but its giving blank Headers object. However in network tab I can see the response header cart_info: {'product_info': {'1': 1}}

Drew Reese Over a year ago

@nitinkumar I'll be honest, none of that looks like a response header key or value. can you share your response from the network tab? (formatted text snippet, or screenshot)

nitin kumar Over a year ago

I have added both console and network snapshot. Please advise

Drew Reese Over a year ago

@nitinkumar Very interesting! Is your API endpoint publicly accessible? I'd like to try hitting it from a sandbox.

nitin kumar Over a year ago

yes it's accessible this is post API actually you can hit it in the browser. sandbox.zeroite.com/api/manage-cart

|

Collectives™ on Stack Overflow

Read header key value from the response header React Js

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related