javascript - Read header key value from the response header React Js - Stack Overflow

admin管理员组

文章数量:1432172

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

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

• javascript
• rest

Share Improve this question Follow edited Mar 20, 2021 at 18:43 Slbox 13.2k1818 gold badges6565 silver badges135135 bronze badges asked Mar 18, 2021 at 6:43 nitin kumarnitin kumar 7322 silver badges77 bronze badges 2

• I don't think header values will be in the JSON response body. Maybe check for them in the res response object. – 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 Commented Mar 18, 2021 at 6:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

fetch('mysite./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.

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./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"]

本文标签： javascriptRead header key value from the response header React JsStack Overflow