网站搜索

javascript - 错误:SyntaxError:使用 fetch() 时 JSON 输入意外结束


我正在尝试在 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));
}

在尝试了一些故障排除后,我在函数中添加了带有“success”和“error”输出的错误捕获,这样至少可以阻止错误页面弹出,并在 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)
}

答案#1

从错误信息和 HTTP 响应可以看出,如果你使用 fetch API 并且服务器端返回 HTTP 200,那么你应该发送一些内容,比如 "OK",否则它会返回空字符串,如果你在响应上使用 .json() 就会导致错误,因为这不是一个有效的 JSON。如果你没有发送任何内容,请在服务器端返回 HTTP 204(no content)。

所以对于你的情况,你应该从服务器端发送一些内容。