I’m building a web application where users can register and login using Node.js, Express, and a PostgreSQL database. However, I’m encountering an issue with my frontend and backend communication. When I attempt to submit the login or register form, the web page only shows the text Cannot POST /login (for both pages)

I was expecting it to add the name, username, and password to the database, the steps ive taken are:

Backend Configuration:

I’ve defined the necessary POST routes (/login-user and /register-user) in my Express server (server.js).
The routes handle POST requests to validate user credentials or register new users in the database using knex.
Frontend Implementation:

I have implemented a form validation and submission logic using JavaScript’s fetch API.
Depending on whether the form is for login or registration (name == null), the frontend sends a POST request to /login-user or /register-user endpoints.

BACK END

var http = require('http');
const express = require('express')
const path = require('path');
const bodyParser = require('body-parser');
const knex = require('knex');

const db = knex({
  client: 'pg',
  connection: {
      host: '127.0.0.1',
      user: 'postgres',
      password: 'Alexander1!',
      database: 'loginform'
  }
})

const app = express();

const initialPath = path.join(__dirname, "");

app.use(bodyParser.json());
app.use(express.static(initialPath));



app.get('/', (req, res) => {
    res.sendFile(path.join(initialPath, "index.html"));
})

app.get('/login', (req, res) => {
    res.sendFile(path.join(initialPath, "loginpage.html"));
})

app.get('/register', (req, res) => {
    res.sendFile(path.join(initialPath, "signuppage.html"));
})

app.post('/register-user', (req, res) => {
    const { name, username, password } = req.body;

    if(!name.length || !username.length || !password.length){
        res.json('fill all the fields');
    } else{
        db("users").insert({
            name: name,
            username: username,
            password: password
        })
        .returning(["name", "username"])
        .then(data => {
            res.json(data[0])
        })
        .catch(err => {
            if(err.detail.includes('already exists')){
                res.json('username already exists');
            }
        })
    }
})

app.post('/login-user', (req, res) => {
    const { username, password } = req.body;

    db.select('name', 'username')
    .from('users')
    .where({
        username: username,
        password: password
    })
    .then(data => {
        if(data.length){
            res.json(data[0]);
        } else{
            res.json('username or password is incorrect');
        }
    })
})

app.listen(3000, (req, res) => {
    console.log('listening on port 3000......')
})

FRONT END

// form loading animation

const form = [...document.querySelector('.form').children];

form.forEach((item, i) => {
    setTimeout(() => {
        item.style.opacity = 1;
    }, i*100);
})

window.onload = () => {
    if(sessionStorage.name){
        location.href = '/';
    }
}

// form validation

const name = document.querySelector('.name') || null;
const username = document.querySelector('.username');
const password = document.querySelector('.password');
const submitBtn = document.querySelector('.submit-btn');

if(name == null){ // means login page is open
    submitBtn.addEventListener('click', () => {
        fetch('/login-user',{
            method: 'post',
            headers: new Headers({'Content-Type': 'application/json'}),
            body: JSON.stringify({
                username: username.value,
                password: password.value
            })
        })
        .then(res => res.json())
        .then(data => {
            validateData(data);
        })
    })
} else{ // means register page is open

    submitBtn.addEventListener('click', () => {
        fetch('/register-user', {
            method: 'post',
            headers: new Headers({'Content-Type': 'application/json'}),
            body: JSON.stringify({
                name: name.value,
                username: username.value,
                password: password.value
            })
        })
        .then(res => res.json())
        .then(data => {
            validateData(data);
        })
    })

}

const validateData = (data) => {
    if(!data.name){
        alertBox(data);
    } else{
        sessionStorage.name = data.name;
        sessionStorage.username = data.username;
        location.href = '/';
    }
}

const alertBox = (data) => {
    const alertContainer = document.querySelector('.alert-box');
    const alertMsg = document.querySelector('.alert');
    alertMsg.innerHTML = data;

    alertContainer.style.top = `5%`;
    setTimeout(() => {
        alertContainer.style.top = null;
    }, 5000);
}