React JS Fetch 返回空响应，但 Postman 没有

Posted 2023-02-27

【中文标题】React JS Fetch 返回空响应，但 Postman 没有

【英文标题】：React JS Fetch Returns Empty Response but Postman Does Not

【发布时间】：2018-02-20 04:32:35

【问题描述】：

我有一个 React JS 应用程序正在尝试登录到基于令牌的 API（我也在使用 Laravel 5.5 和 Laravel Passport 进行开发）。我正在尝试实现基本登录（使用用户名和密码登录，验证后从服务器接收令牌，使用该令牌进行未来查询）。

我用来获取的代码如下：

function loginApi(username, password) 
    return fetch(loginUrl, 
        method: 'POST',
        headers: 
            'Content-Type': 'application/json',
        ,
        body: JSON.stringify(
            grant_type: 'password',
            client_id: clientId,
            client_secret: clientSecret,
            username: username,
            password: password
        )

   ).then(handleApiErrors)
     .then(response => response.json)

值得注意的是，它并不完全完整，因为我目前只是试图确定我得到的响应。

我已经解决了遇到的正常问题，例如 CORS 问题，但是我现在遇到的问题是来自 API 的响应只是......空的。即使在 Chrome 开发者工具的 Network 标签中，如果我直接检查请求，响应也是空的。

然而，如果我用 Postman 进行精确的same 查询，结果正是我所期望的。

这可能是什么问题？为什么完全相同的查询会返回不同的结果？

【参考方案1】：

我已经通过这种方式成功修复了它：

客户端（使用 React 和 Fetch-API）

const update = async (credentials, productData) => 
  try 
    let response = await fetch('/api/products/', 
      method: 'PUT',
      headers: 
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + credentials.t
      ,
      body: productData
    )
    return await response.json()
   catch (err) 
    console.log(err)
  

服务器端（Nodejs，Express with ）：

app.use(bodyParser.json())
app.use(bodyParser.urlencoded( extended: true ));
app.use(cors())
...

【讨论】：

注意：如果没有 'Content-Type': 'application/json' 在客户端，它将无法工作

【参考方案2】：

.json 是一个函数，需要调用。试试..

.then(response => response.json())

您当前正在返回 .json 解析函数。

【讨论】：

天啊！谢谢，就是这样。但是我很好奇：为什么调用该函数会改变服务器的响应？对于我公认的 React 新手来说，服务器的响应应该是一样的，不是吗？唯一的区别是应用程序如何理解它？为什么在网络选项卡中查看响应是空的？

@PeregrineStudios 您没有更改服务器响应。请记住，fetch 现在是浏览器原生 API。您可能正在考虑浏览器获取和返回的 AJAX 调用，但是如何格式化它是您的事。但是使用 Fetch，整个 Promise 链都是 API 调用的一部分。它正确地“获取”了调用（您的服务器日志应该显示）但没有显示在开发者控制台中，因为浏览器解释了整个 fetch 调用，而不仅仅是电汇请求。