web-dev-qa-db-ja.com

fetchは空の応答本文を返します

反応/リデュースアプリケーションがあり、サーバーに対して簡単なGETリクエストを実行しようとしています。

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
}).then((response) => {
  console.log(response.body); // null
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('request failed', error); });

問題は、.then()関数の応答本文が空であり、理由がわかりません。オンラインで例を確認しましたが、コードが機能するように見えるので、ここで明らかに何かが欠けています。問題は、Chromeの開発ツールで[ネットワーク]タブをチェックすると、リクエストが行われ、探しているデータが届くということです。

誰もこれに光を当てることができますか？

編集：

応答を変換してみました。

.text()を使用：

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.text())
.then((response) => {
  console.log(response); // returns empty string
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('request failed', error); });

および.json()を使用：

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.json())
.then((response) => {
  console.log(response.body);
  return dispatch({
    type: "GET_CALL",
    response: response.body
  });
})
.catch(error => { console.log('request failed', error); }); // Syntax error: unexpected end of input

chrome開発ツールを見る：

enter image description here

javascriptfetch-api
41
Razvan Ilin

私はこれに出くわしました。この answer で述べたように、mode: "no-cors"を使用するとopaque responseが得られますが、これは本文にデータを返さないようです。

opaque：クロスオリジンリソースへの「no-cors」リクエストに対する応答。 厳しく制限された 。

私の場合、Expressを使用していました。 Expressのcors をインストールして構成し、mode: "no-cors"を削除した後、約束が返されました。応答データは約束の範囲内にあります。

fetch('http://example.com/api/node', {
  // mode: 'no-cors',
  method: 'GET',
  headers: {
    Accept: 'application/json',
  },
},
).then(response => {
  if (response.ok) {
    response.json().then(json => {
      console.log(json);
    });
  }
});
100
RationalDev

response.bodyにアクセスするには、responseをjsonに変換する必要があります

docs から

fetch(url)
  .then(response => response.json())
  .then(json => {
    console.log('parsed json', json) // access json.body here
  })
18
Naisheel Verdhan

応答の本文を読む必要があります。

fetch(url)
  .then(res => res.text()) // Read the body as a string

fetch(url)
  .then(res => res.json()) // Read the body as JSON payload

本体を読むと、それを操作できるようになります。

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
  .then(response => response.json())
  .then(response => {
    return dispatch({
      type: "GET_CALL",
      response: response
    });
  })
5
Florent

response.json（） を使用してみてください：

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
}).then((response) => {
  console.log(response.json()); // null
  return dispatch({
    type: "GET_CALL",
    response: response.json()
  });
})
.catch(error => { console.log('request failed', error); });
1
Damien Leroux
fetch("http://localhost:8988/api", {
    method: "GET",
    headers: {
       "Content-Type": "application/json"
    }
})
.then((response) =>response.json());
.then((data) => {
    console.log(data);
})
.catch(error => {
    return error;
});
0
user10045612

多くの場合、エクスプレスノードアプリにbodyParserモジュールを追加する必要があります。次に、app.useの下のapp.use(express.static('www'));これらの2行を追加しますapp.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json());

0
Brianhenry
fetch("http://localhost:8988/api", {
        //mode: "no-cors",
        method: "GET",
        headers: {
            "Accept": "application/json"
        }
    })
    .then(response => {
        return response.json();
    })
    .then(data => {
        return data;
    })
    .catch(error => {
        return error;
    });

これは私のために動作します。

0
Ani Thettayil