Integration of XMLHttprequest POST with express router and then database

Projects Personal Projects
1

I am working on a customer signup form which will first validate input feilds, after validation a XMLHttprequest will be initiated which will be received by express router and than data will be stored in data base, here are my code files.

HTML file Code

<form id="sign_up" onsubmit="return false">
            <section class="sign_up_item">
                <label for="fname">First Name</label>
                <input type="text" name="fname" id="fname" placeholder="First Name" required />
            </section>
            <section class="sign_up_item">
                <label for="lname">Last Name</label>
                <input type="text" name="lname" id="lname" placeholder="Last Name" required />
            </section>
            <section class="sign_up_item">
                <label for="email">Email Address</label>
                <input type="text" name="email" id="signup_email" placeholder="[email protected]" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"  required />
            </section>
            <section class="sign_up_item">
                <label for="mobile_number">Mobile Number</label>
                <input type="text" name="mobile_number" id="mob_num" pattern="[0-9]{4}[-][0-9]{7}" placeholder="0334-2824412" required />
            </section>
            <section class="sign_up_item">
                <label for="address">Address</label>
                <input type="text" name="address" id="address" placeholder="Insert your address hre with nearby Landmark, Not More than 100 characters" required />
            </section>
            <section class="sign_up_item">
                <label for="city">City</label>
                <input type="text" name="city" placeholder="City" id="city" required />
            </section>
            <section class="sign_up_item">
                <label for="password">Password</label>
                <input type="password" name="password" placeholder="Password" id="password" required />
            </section>
            <section class="sign_up_item">
                <label for="conf_password">Confirm Password</label>
                <input type="password" name="conf_password" placeholder="Confirm Password" id="conf_password" required />
            </section>
            <div class="form_end">
                <label for="endorsement">I have read and agreed to the terms and conditions</label>
                <input type="checkbox" class="checkbox" name="endorsement" id="endorsement" required />
                <p id="form_note"></p>
                <br />
                <button class="submit_button" onclick="signup_data_validation()"  >Submit</button>
            </div>

.js Code

// JavaScript source code
function signup_data_validation() {
    const form = document.forms['sign_up'];
    const fname = form['fname'].value;
    const lname = form['lname'].value;
    const signup_email = form['signup_email'].value;
    const mob_num = form['mob_num'].value;
    const address = form['address'].value;
    const city = form['city'].value;
    const password = form['password'].value;
    const conf_password = form['conf_password'].value;
    const endorsement = form['endorsement'].value;

    let new_customer = {
        fname: fname,
        lname: lname,
        signup_email: signup_email,
        mob_num: mob_num,
        address: address,
        city: city,
        password: password,
        conf_password: conf_password,
        endorsement: endorsement,

    };

    if(new_customer.password !== new_customer.conf_password) {
        document.getElementById('form_note').innerHTML = "Current Password do not match Confirm Password";
    }

    else {
        document.getElementById('form_note').innerHTML = "";
        const xhr = new XMLHttpRequest();
        const url = 'http://localhost:4001/customers';
        const data = JSON.stringify(new_customer);

        xhr.onreadystatechange = () => {
            if(xhr.readyState === XMLHttpRequest.DONE) {
                console.log("response received");
                console.log(xhr.responseText);
            }
        }

        xhr.open('POST', url);
        xhr.send(data);
        
    }
}

express.js code

const express = require('express');
const sqlite3 = require('sqlite3');
const db = new sqlite3.Database('./miclothing');
const app = express();
app.use(express.static('public'));   // web resources location

const PORT = process.env.PORT || 4001;

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    next();
});

app.post('/customers', (req, res, next) => {
    console.log("Customers post Request Received");
    res.send("Done");
});

app.listen(PORT, () => {
    console.log(`Sever is listening at ${PORT}`);
});

Note: port is listening successfully, however post request is not executed getting following error,
XHR failed loading: POST “http://localhost:4001/customers”.

What is going wrong please guide