Fetch POST请求客户端console.log失效，JSON解析报错排查

POST请求可成功提交至服务器，服务器端console.log能正常输出接收的数据，但客户端console.log无法正常工作，同时抛出错误：
SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
请求状态显示为200 OK。

提交的请求数据格式合规：
{"hotSauceId":32,"presentation":5,"viscosityId":3,"spiciness":10,"Flavor_Notes":["Constituent Peppers"],"overall_rating":5,"lovedit":true,"taster_notes":"test"}

客户端提交代码 #

const handleSubmit = (e) => { 
    e.preventDefault();
    fetch('http://jyh:3000', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({
          "hotSauceId": sauce,
          "presentation": presentation,
          "viscosityId": viscosity,
          "spiciness": spiciness,
          "Flavor_Notes": flavor,
          "overall_rating": overall,
          "lovedit": loved,
          "taster_notes": notes
      }),
      }).then(res => {
          return res.json();
      }).then(data => {
          console.log(data);
      }).catch(err => {
          console.log(err);
      });
  };

服务器端处理代码 #

app.post('/', async (req, res) => {
    await Jyh.create({  // .create is a Sequelize method
        hotSauceId: req.body.hotSauceId,
        presentation: req.body.presentation,
        viscosityId: req.body.viscosityId,
        spiciness: req.body.spiciness,
        Flavor_Notes: req.body.Flavor_Notes,
        overall_rating: req.body.overall_rating,
        lovedit: req.body.lovedit,
        taster_notes: req.body.taster_notes
    }).then(() => {
        console.log('req.body: ', req.body);
    }).catch((err) => {
        console.log(err);
    });
});

服务器端处理完数据库创建操作后，没有向客户端返回任何响应内容。客户端调用res.json()时，会尝试将空的响应体解析为JSON，空内容不符合JSON格式，因此触发解析错误。

修改服务器端代码，在操作完成后返回JSON格式的响应，无论成功还是失败：

app.post('/', async (req, res) => {
    try {
        await Jyh.create({
            hotSauceId: req.body.hotSauceId,
            presentation: req.body.presentation,
            viscosityId: req.body.viscosityId,
            spiciness: req.body.spiciness,
            Flavor_Notes: req.body.Flavor_Notes,
            overall_rating: req.body.overall_rating,
            lovedit: req.body.lovedit,
            taster_notes: req.body.taster_notes
        });
        console.log('req.body: ', req.body);
        // 返回成功响应
        res.status(200).json({ success: true, message: '数据提交成功' });
    } catch (err) {
        console.log(err);
        // 返回错误响应
        res.status(500).json({ success: false, message: '数据提交失败', error: err.message });
    }
});

修改后，客户端res.json()能解析到合法的JSON数据，console.log(data)就能正常输出响应内容，不会触发解析错误。

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