Go API与React前端交互时fetch出现JSON输入意外结束语法错误

这个错误我之前也碰到过，本质就是你的Go后端没有返回有效的JSON数据，导致前端response.json()尝试解析空内容或者非JSON格式时失败。下面是一步步的排查和解决方法：

1. 先检查Go后端的响应逻辑 #

你得确保Go的接口处理函数正确输出了JSON，而不是空响应或者其他格式：

• 正确的JSON返回方式应该是这样的：

  func stuffHandler(w http.ResponseWriter, r *http.Request) {
    // 先设置Content-Type头（虽然json.Encode会自动加，但手动设置更稳妥）
    w.Header().Set("Content-Type", "application/json")
    
    // 处理请求逻辑...
    
    // 返回JSON数据
    responseData := map[string]interface{}{
      "message": "请求成功",
      "result":  "这里是你的返回数据",
    }
    if err := json.NewEncoder(w).Encode(responseData); err != nil {
      // 如果编码出错，也要返回错误JSON
      w.WriteHeader(http.StatusInternalServerError)
      json.NewEncoder(w).Encode(map[string]string{"error": "响应编码失败"})
      return
    }
  }
  

• 特别注意：如果后端处理出错（比如参数校验失败），不要直接中断请求，一定要返回一个JSON格式的错误响应，否则前端拿到空响应就会报这个错。

2. 给前端fetch添加完善的错误处理 #

fetch不会自动把HTTP错误（比如404、500）当成Promise错误，所以你得先判断响应状态，再解析JSON：

postData() {
  fetch('stuff/', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ name: 'Bob', age: 53 })
  })
  .then(response => {
    // 先检查响应是否成功（状态码200-299）
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    // 确认响应是JSON后再解析
    return response.json();
  })
  .then(data => {
    console.log('拿到的数据：', data);
    // 这里处理正常业务逻辑
  })
  .catch(error => {
    console.error('出错了：', error);
    // 可以在这里给用户显示友好的错误提示
  });
}

3. 用浏览器开发者工具排查细节 #

打开浏览器的「开发者工具」→「网络」标签，找到这个POST请求：

• 查看「响应」标签，看看后端到底返回了什么（是空内容？还是HTML错误页面？）
• 查看「请求头/响应头」，确认响应的Content-Type是不是application/json

4. 确认接口路径和跨域问题 #

• 检查'stuff/'是不是正确的后端接口路径，有没有拼写错误
• 如果前后端域名不同，还要确认Go后端已经配置了CORS，否则浏览器会拦截响应，也可能导致解析失败

内容的提问来源于stack exchange，提问作者Ben