Post Request to NodeJS Backend

Question

I am currently trying to post json data to a json file. In order to do so, I've setup a NodeJS and express server but something keeps messing up. I keep receiving this feedback:

jquery-3.2.1.js:9566 POST http://localhost:3000/Alpha/json/details.json 404 (Not Found)

I read several other questions stating that the issues is probably in my server side script and that I haven't specified the json file correctly.

JS Client Side Post script:

function sendFormData(){
            var formData = JSON.stringify($("#myForm").serializeArray());

            $.ajax({
                type: "POST",
                url:"../json/details.json",
                data: formData,
                success: function(){
                    alert("something!");
                }
            });
        } 

My HTML Form:

<form action="XXXXXXXX"id="myForm"><label for="id">ID</label>
    <input type="text" id="id" name="id" placeholder="Item ID number" ng-model="newDetails.id">

       <label for="system">System</label>
       <input type="text" id="system" name="lastname" placeholder="Type of System" ng-model="newDetails.system">

       <label for="date">Date</label>
       <input type="text" id="date" name="lastname" placeholder="dd-mm-yyyy"  ng-model="newDetails.date">

       <label for="priority">Priority</label>
       <select id="priority" name="priority" ng-model="newDetails.priority">
         <option value="high">High</option>
         <option value="medium">Medium</option>
         <option value="low">Low</option>
        </select>
        <label for="description">Description</label>
        <textarea class="form-control" rows="3" id="desc" name="description" ng-model="newDetails.description"></textarea>

        <label for="priority">Status</label>
        <select id="status" name="status" ng-model="newDetails.status">
          <option value="OPEN">OPEN</option>
          <option value="ON HOLD">ON HOLD</option
          <option value="CLOSED">CLOSED</option>
        </select>

       <input type="button" value="Submit" class="btn" data-dismiss="modal" style="background-color:#FFBE00; color:#002244;" onClick="sendFormData()">
</form>

NodeJS Script:

    var express = require('express');
    var app = express();
    var bodyParser = require('body-parser');
    var path = require('path');

    app.use(bodyParser.json());
    app.use('../json', express.static(path.join(__dirname, 'json')));
    app.use('/', express.static(__dirname + '/'));


    app.post('/formdata', function(req, res) {
        console.log( req.body.id + req.body.system + req.body.date + req.body.priority + req.body.description + req.body.status);
        res.send("ok");
    });

    app.use(bodyParser.json());

    // Get information submitted
    app.post('/', function(req, res) {
        console.log("Information received !");
        console.log(req.body);
        res.send("Ok!");
    });

app.listen(3000);

Is my Node Script working fine? Why cannot I find the json file?

root/Alpha/json/details.json - is the json file path

my node script is in the root directory

Answer 1

I see that you are confused with many things here. I think you should step back and learn about absolute and relative URLs before you'll be able to understand how to fix your code. The advice on how to fix it is below but it will serve you no good if you just blindly apply the advice. You need to learn why you need to do the things below or otherwise you will face more problems later. Read about URLs, paths and HTTP:

• https://en.wikipedia.org/wiki/URL
• https://en.wikipedia.org/wiki/Uniform_Resource_Identifier
• https://en.wikipedia.org/wiki/File_system
• https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

Read at least the basic info on how absolute and relative URLs are constructed, what is sent as path in HTTP requests, how to traverse the file system and what /, .. and . mean.

Now, to the solution.

This makes no sense:

app.use('../json', express.static(path.join(__dirname, 'json')));

because you cannot serve a URL that is one level up the root path.

When you access ../x/y.json from the client side when you are on a page e.g. http://www.example.com/a/b/c/index.html then what the client will request is actually http://www.example.com/a/b/x/y.json and this is what you need to serve on the backend side. What file you actually serve is a different story, but this is a route that you need to serve.

I think you need to rethink:

1. what ., .. and / mean in relative URLs
2. what actual URL you want to serve - it can be anything but your client and server must agree on it

What would make sense would be:

app.use('/json', express.static(path.join(__dirname, 'json')));

but it would be redundant if you serve the __dirname anyway and it already includes the json directory:

app.use('/', express.static(__dirname + '/'));

By the way the above could be just:

app.use('/', express.static(__dirname));

but it is not recommended (and needed) to serve your backend files. You should put all of your static content in one directory e.g. called static or public or html or whatever and serve this directory with:

app.use('/', express.static(path.join(__dirname, 'static')));

and put your json directory inside of that directory.

For more info and examples on how to properly serve static content, see the following answers:

• Failed to load resource from same directory when redirecting Javascript
• onload js call not working with node
• How to serve an image using nodejs