Express.js not sending html file on post request

Question

I'm just trying to send HTML file upon POST request. I'm 100% sure it was working an hour ago. Since then, I cannot figure out why it's not working all of a sudden!

Server Router:

const express = require('express');
const router = express.Router();
const cors = require('cors');
const path = require('path');
const auth = require('../middleware/auth.js');

// HOME ROUTE
router.options('/', cors());
router.get('/', cors(), (req, res) => {
   res.status(201).sendFile(path.resolve(__dirname, '../', '../', 'public', 'index.html'));
});
router.post('/', cors(), (req, res) => {
   res.status(201).sendFile(path.resolve(__dirname, '../', '../', 'view', 'manager.html'));
});

There's no error from server.

index.html

<form method="POST" autocomplete="off">
      <input id="username" type="text" name="username" placeholder="Username" onchange="updateUsername(event)"><br>
      <input id="password" type="password" name="password" placeholder="Password" onchange="updatePassword(event)"><br>
      <button onclick="submitFunc(event)">LOGIN</button>
   </form>

   <script>
      let username_value = document.querySelector('#username').value;
      let password_value = document.querySelector('#password').value;

      function updateUsername(e) {
         username_value = e.target.value;
      }

      function updatePassword(e) {
         password_value = e.target.value;
      }

      async function submitFunc(e) {
         e.preventDefault();
         let response = await fetch('/', {
            headers: { 'Content-Type': 'application/json' },
            method: 'POST',
            body: JSON.stringify({
               username: username_value,
               password: password_value
            })
         });

         console.log(response);
   }

Please note that the login logic itself is not an issue. I altered my code a lot due to this issue I have.

Upon sending POST request to '/', This is the response that logs in client console:

So the fetching itself seems to work just fine. It's just that new HTML file is not replacing the current HTML file. How would I go about fixing this?

Please post your code as text, not as screen shots. That then allows people to copy/paste it into answers without having to retype everything. It also allows for proper indexing for search, allows screen readers to see it, etc... Always post code as text (then properly formatted as code here) and never as screenshots. — jfriend00, Nov 17 '20 at 22:09
Also, please show the client code that sends this request as it appears that you are getting the headers, but not actually reading the response stream to get the content (as indicated by the part that says `body: readableStream`). — jfriend00, Nov 17 '20 at 22:11
@jfriend00 Edited! I'm sending body data because it's basically a simple login logic. My server doesn't have authentication logic now because I removed everything to spot out the issue. — passionateLearner, Nov 17 '20 at 22:19

jfriend00 · Accepted Answer · 2020-11-17T22:52:29.767

1

You need to actually read the response. await fetch(...) just gets the headers and leaves a readableStream sitting there with the content waiting for you to read the actual content with response.json() or response.text() depending upon the data type you're expecting.

Change to this:

  async function submitFunc(e) {
     e.preventDefault();
     try {
         let response = await fetch('/', {
            headers: { 'Content-Type': 'application/json' },
            method: 'POST',
            body: JSON.stringify({
               username: username_value,
               password: password_value
            })
         });
         // this assumes the response is text or html, 
         // use response.json() if the response is json
         let data = await response.text()
         console.log(data);
     } catch(e) {
         console.log(e);
         // decide what to do here if there was an error with the fetch() call
     }
 }

You can see the various different methods available for reading the body contents here on MDN.

Also, if you're making a request with fetch(), the response from your server will just come back to your Javascript in your web page. It will NOT automatically display in the browser. If you want it to display in your browser, then either let the form post natively (without Javascript) or you will have to manually code your Javascript to receive the response and then insert it into the page content yourself.

edited Nov 17 '20 at 22:52

answered Nov 17 '20 at 22:47

jfriend00

683,504
96
985
979

Thanks for the reply. I tried that initially ```response.json().then( res => console.log(res) );```. How would I go about replacing current HTML if I don't want to use the built-in form? – passionateLearner Nov 17 '20 at 23:49
1

@passionateLearner - Perhaps `document.body.innerHTML = data`. This assumes that the `data` is just HTML (not the whole structure of a page). If you just want normal form behavior, why are you not just letting the browser post the form for you automatically and then it will show the returned content automatically. Javascript should be used when you need to do something that the browser won't do automatically for you. There is NOTHING going on in your form that requires or even benefits from posting it with Javascript. In fact, it's more complicated with Javascript. – jfriend00 Nov 18 '20 at 00:33
1

@passionateLearner - Just add the form attribute `action="/"`, remove your Javascript and the browser will do it for you. By default the browser will send the content-type `application/x-www-form-urlencoded` so you will want the express middleware to parse that content type for you so you can get the form parameters automatically in your express request handler. I like your user name, by the way. – jfriend00 Nov 18 '20 at 00:36
1

@passionateLearner - FYI, if your response is JSON, what exactly do you want to insert in the page? You will have to turn it into HTML or browser DOM objects before you can insert it into the page. Your objective with this code is unclear. – jfriend00 Nov 18 '20 at 00:54
Thank you! I was able to fix the issue by re-implementing form. Since you've mentioned, I want to ask you another question. My response was in JSON because I initially wanted to pass additional data (in object form) along with HTML file, would this be possible? – passionateLearner Nov 18 '20 at 18:01
1

@passionateLearner - You only get one response and one content-type. So, you either send HTML or JSON as the response. If you send JSON, you could put HTML into one of the properties of the JSON serialized object and then your receiving code would have to know how to pull that HTML out and do something with it. – jfriend00 Nov 18 '20 at 18:07
I see. That's a lesson. Much appreciate. – passionateLearner Nov 18 '20 at 18:09

Express.js not sending html file on post request

1 Answers1