Javascript fetch 给出一个空的响应体

fetch gives an empty response body

提问by Razvan Ilin

I have a react/redux application and I'm trying to do a simple GET request to a sever:

我有一个 react/redux 应用程序，我正在尝试向服务器发出一个简单的 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); });

The problem is that the response body is empty in the .then()function and I'm not sure why. I checked examples online and it looks like my code should work so I'm obviously missing something here. The thing is, if I check the network tab in Chrome's dev tools, the request is made and I receive the data I'm looking for.

问题是.then()函数中的响应主体是空的，我不知道为什么。我在网上检查了示例，看起来我的代码应该可以工作，所以我显然在这里遗漏了一些东西。问题是，如果我检查 Chrome 开发工具中的网络选项卡，就会发出请求并收到我正在寻找的数据。

Can anybody shine a light on this one?

任何人都可以照亮这个吗？

EDIT:

编辑：

I tried converting the reponse.

我尝试转换响应。

using .text():

使用.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); });

and with .json():

并与.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

Looking in the chrome dev tools:

查看 chrome 开发工具：

回答by RationalDev likes GoFundMonica

I just ran into this. As mentioned in this answer, using mode: "no-cors"will give you an opaque response, which doesn't seem to return data in the body.

我刚遇到这个。正如在这个答案中提到的， usingmode: "no-cors"会给你一个opaque response，它似乎没有在正文中返回数据。

opaque: Response for “no-cors” request to cross-origin resource. Severely restricted.

opaque：对跨源资源的“no-cors”请求的响应。 严格限制。

In my case I was using Express. After I installed cors for Expressand configured it and removed mode: "no-cors", I was returned a promise. The response data will be in the promise, e.g.

就我而言，我使用的是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);
    });
  }
});

回答by Naisheel Verdhan

You will need to convert your responseto jsonbefore you can access response.body

您需要先将您的转换response为jsonresponse.body

From the docs

从文档

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

回答by Florent

You must read the response's body:

您必须阅读响应的正文：

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

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

Once you've read the body you will be able to manipulate it:

阅读正文后，您将能够操纵它：

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
    });
  })

回答by Damien Leroux

Try to use response.json():

尝试使用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); });

回答by Ani Thettayil

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;
    });

This works for me.

这对我有用。

回答by Ani Thettayil

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;
});

回答by Brianhenry

In many case you will need to add the bodyParser module in your express node app. Then in your app.use part below app.use(express.static('www'));add these 2 lines app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json());

在许多情况下，您需要在 express 节点应用程序中添加 bodyParser 模块。然后在您的 app.use 部分下面app.use(express.static('www'));添加这两行 app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json());