fetch 给出一个空的响应主体

Question

我有一个 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); });

问题是 .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 开发工具：

Answer 1

您必须阅读回复正文：

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

Answer 2

您需要先将 response 转换为 json，然后才能访问 response.body

From the docs

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

Answer 3

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

Answer 4

我只是运行喜欢这个。正如这个 answer 中提到的，使用 mode: "no-cors" 会给你一个 opaque response，它似乎没有 return 正文中的数据。

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

在我的例子中，我使用的是 Express。在我安装 cors for Express 并配置它并删除 mode: "no-cors" 之后，我得到了 return 的承诺。响应数据将在承诺中，例如

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

Answer 5

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

这对我有用。

Answer 6

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

Answer 7

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

Answer 8

这需要更改前端 JS 和从后端发送的 headers。

前端

删除提取选项中的"mode":"no-cors"。

fetch(
  "http://example.com/api/docs", 
  {
    // mode: "no-cors",
    method: "GET"
  }
)
  .then(response => response.text())
  .then(data => console.log(data))

后端

当您的服务器响应请求时，请包含指定请求来源的 CORS headers。如果您不关心来源，请指定 * 通配符。

原始响应应包括这样的 header。

Access-Control-Allow-Origin: *

Answer 9

就我而言，这不是 cors。出于某种原因，如果从子组件调用 fetch，客户端会得到一个空的响应主体，一旦我将数据提取移动到根 App 组件，客户端就会得到正确的响应主体。不知道为什么，就跟着去了。如果有人能解释一下就好了。

fetch 给出一个空的响应主体

fetch gives an empty response body

javascript

fetch-api