title: fetch() POST requests with Express: unexpected end of JSON input
body: <p>I've been trying to practice with some HTTP requests, and specifically I want to send a POST request, with data taken from an  field, and sent via fetch() to a url on my localhost thats set up with express. From there i want to somehow get the response back and have that be displayed on my HTML doc.</p>
  <p>However, I've ran into a real head scratcher when it comes to getting response.json() to be anything other than undefined.</p>
  <p>here's my frontend script:</p>
  <pre><code>const url = &quot;/result&quot;;
  
  const inputField = document.querySelector(&quot;#write&quot;);
  const submitButton = document.querySelector(&quot;#submit&quot;);
  const responseField = document.querySelector(&quot;#text-goes-here&quot;);
  
  const postText = async () =&gt; {
    const text = inputField.value;
    const data = JSON.stringify({ destination: text });
  
    try {
      const response = await fetch(url, {
        method: &quot;POST&quot;,
        body: data,
        headers: {
          &quot;Content-type&quot;: &quot;application/json&quot;,
        },
      });
  
      if (response.ok === true) {
        const jsonResponse = await response.json();
        responseField.innerHTML = jsonResponse;
      }
    } catch (error) {
      console.log(error);
    }
  };
  
  const displayText = (event) =&gt; {
    event.preventDefault();
  
    while (responseField.firstChild) {
      responseField.removeChild(responseField.firstChild);
    }
  
    postText();
  };
  
  submitButton.addEventListener(&quot;click&quot;, displayText);
  
  </code></pre>
  <p>and my server script:</p>
  <pre><code>const express = require(&quot;express&quot;);
  const bodyParser = require(&quot;body-parser&quot;);
  const read = require('fs');
  const router = express.Router();
  const app = express();
  
  const port = 3000;
  
  
  app.use(express.static(__dirname + &quot;/public&quot;));
  
  app.use(bodyParser.urlencoded({ extended: true }));
  app.use(bodyParser.json());
  
  
  app.get(&quot;/&quot;, (req, res) =&gt; {
      res.sendFile(&quot;public/index.html&quot;);
  })
  
  router.post(&quot;/result&quot;, (req, res) =&gt; {
      console.log(req.body);
      res.send();
  });
  
  app.use(&quot;/&quot;, router);
  
  app.listen(port, () =&gt; {
      console.log(`Server running at port: ${port}`)
  });
  </code></pre>
  <p>I did some digging in the dev console and found that (response.ok) is in fact &quot;true&quot;, yet it errors out into the catch statement saying &quot;SyntaxError: Unexpected end of JSON input
  at postText (script.js:23)&quot;</p>
  <p>which is this line exactly:</p>
  <pre><code>const jsonResponse = await response.json();
  </code></pre>
  <p>can anyone shed any light on what i'm doing wrong here? I'm at a loss at this point</p>