【问题标题】:Error: SyntaxError: Unexpected end of JSON input when using fetch()错误:SyntaxError:使用 fetch() 时 JSON 输入意外结束
【发布时间】:2018-10-03 02:26:12
【问题描述】:

我正在尝试在 Go API 服务器和基于 React 的前端之间发送 JSON。我收到以下错误:

错误:SyntaxError:JSON 输入意外结束

这是说这发生在第 25 行

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

这是相关函数:

postData() {
fetch('stuff/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Bob',
    age: 53,
  })
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
}

在尝试了一些故障排除后,我使用“成功”和“错误”输出将错误捕获添加到函数中,这样它至少会停止弹出错误页面并在 API 服务器上添加一些控制台输出以查看数据是否正确正在通过。

除了发生的错误之外,一切似乎都按预期工作。 Go API 服务器正在接收 json 数据,我能够将其解组为一个结构并将数据写入控制台,这样我就知道数据正在传递。操作的 Go 端没有抛出任何错误。

我无法找出可能导致错误的原因?寻找一些关于如何进一步解决此问题或解决错误的建议。

更新: 正如 Dale 所建议的,我已将 .then(response => console.log(response)) 放入我的代码中。我用这段代码替换了标准的 .then(response => response.json()) 。下面是来自 chrome 开发工具的控制台截图。

另外值得注意的是,在这种情况下不会弹出错误代码。错误可能与服务器端 go 代码有关吗?下面是 POST 端点的处理程序

func handlePostTest(w http.ResponseWriter, r *http.Request) {
body, err := ioutil.ReadAll(r.Body)
if err != nil {
    fmt.Print(err.Error())
}
var aPerson Person
json.Unmarshal(body, &aPerson)
fmt.Print(" ", aPerson.Name, " ", aPerson.Age)
}

【问题讨论】:

  • 响应不是有效的 JSON。使用 Postman 测试响应。
  • 我对 Postman 不熟悉,但会尝试做一个测试。
  • 你能告诉我们你收到的 JSON 对象吗?
  • 试试.then(response => console.log(response)),看看你会得到什么
  • @Ben 如果您使用 fetch api 并从服务器端返回 HTTP 200,那么您应该发送一些类似 ok 的内容,否则它会返回空字符串,如果您在其中使用 .json()它会导致错误,因为它不是有效的 json。如果您不发送任何内容,请从服务器端发送 HTTP 204(无内容)

标签: javascript json reactjs


【解决方案1】:

从错误消息和 HTTP 响应中可以看出,如果您使用 fetch api 并从服务器端返回 HTTP 200,那么您应该发送一些类似 "OK" 的内容,否则返回空字符串,如果您使用 .json()最重要的是响应它会导致错误,因为它不是有效的 json。如果您不发送任何内容,请从服务器端发送 HTTP 204 (no content)。

因此,对于您的情况,您应该从服务器端发送一些内容。

【讨论】:

  • 如何从服务器发送一些内容?
  • @AymenKareem 这取决于您使用的服务器端语言。理想情况下,它可以是任何有效的 json 编码值
  • 我有这个回报:return CreatedAtAction("GetBooking", new { id = booking.BookingID }, booking);
  • 我觉得它返回了新创建的对象。我收到与此线程中的标题相同的错误。知道为什么吗?
猜你喜欢
  • 2015-08-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-05
  • 1970-01-01
  • 2018-05-07
  • 2018-01-23
  • 2017-11-23
相关资源
最近更新 更多