CODEWITHSUNDEEP
javascriptnode.jsexpress
wayta
wayta

Reputation: 45

Error: Not Found The requested URL was not found on this server

I'm trying to send some html form data to a node js file using express. However as I submit the form I keep getting this error on the browser (I've tried different browsers and restarted the server every time):

enter image description here

Here's the code:

import mysql from 'mysql2';
import express from 'express';
import path from 'path';


let probes = [];
let measurements = [];
let to_country;

const app = express();
const __dirname = path.resolve();
app.use(express.urlencoded( {extended: true} ));
app.use(express.static(__dirname));

const con = mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'',
    database:'probes&anchors'
});

con.connect((err)=>{
    if(err){
        console.log("Connection not proper");
    }else{
        console.log("connected");
    }
});

app.post('/', async function(req,res){

    to_country = req.body.to_country;
    let sql = 'SELECT id FROM probes WHERE country=?';
    await con.promise().query(sql, [req.body.from_country], (err, rows) => {
        if (err) throw err;
        
        probes.push(rows.id);
        console.log('Probe id: ', rows.id);
    })
    console.log(probes);
    con.end();

    res.send("Loaded");
});

app.get('/', (req, res) => res.send('Hello World! From Node.js'));
app.listen(8000, () => console.log('Example app listening on port 8000!'));
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API Demo</title>
</head>
<body>
    <form action="/" method="POST">
        <label for="from_country">From:</label>
        <select id="from_country" name="from_country">
            <option>Country1</option>
            <option value="AF">Afghanistan</option>
            <option value="AX">Aland Islands</option>
        </select>

        <label for="to_country">To:</label>
        <select id="to_country" name="to_country">
            <option>Country2</option>
            <option value="AF">Afghanistan</option>
            
        </select>
        <input type="submit" value="Latency?">
    </form> 
    
</body>
</html>

Both files are in the same directory.
I've modified Apache httpd.conf uncommenting two lines and adding the following line as shown here:

ProxyPass / http://localhost:8000

Can someone please help out? Any help is appreciated, thanks.

Upvotes: 0

Views: 1473

Answers (1)

Het Tarkhala
Het Tarkhala

Reputation: 132

As I can see you are running apache server and node.js server on same port which requires some special configurations

you have to tell apache server explicitly to send (all or in some cases request coming from specific path) requests to node.js server (this technique is called reverse proxy technique)

this blog below might help you understand that here or here

EDIT

app.post('/', async function(req,res){
    to_country = req.body.to_country;
    let sql = 'SELECT id FROM probes WHERE country=?';
    await con.promise().query(sql, [req.body.from_country], (err, rows) => {
        if (err) throw err;
        
        probes.push(rows.id);
        console.log('Probe id: ', rows.id);
    })
    console.log(probes);
    con.end();

    res.send("Loaded");
});

can be simplified to ...

app.post('/', (req,res)=>{
    to_country = req.body.to_country;
    let sql = 'SELECT id FROM probes WHERE country=?';
    con.query(sql, [req.body.from_country], (err, rows) => {
        if (err) throw err;
        else {
           probes.push(rows.id);
           console.log('Probe id: ', rows.id);
           console.log(probes);
           con.end();
           res.send("Loaded");
        }     
    })
});

Upvotes: 1

Related Questions