Linking HTML button to node.js post

Question

Basic question here: I set up a local server with express and I want to create a file on the server by clicking a HTML button.

Here is the srcServer.js:

var express = require('express');
var path = require('path');
var open = require('open');
var fs = require('fs');

var port = 3000;
var app = express();

app.get('/', function(req, res){
    res.sendFile(path.join(__dirname, '../src/index.html'));
});

app.post('/', function(request, respond) {
    fs.writeFile('message.txt', 'Hello Node.js', (err) => {
        if (err) throw err;
        console.log('The file has been saved!');
    });
});

app.listen(port, function(err){
    if(err){
        console.log(err);
    }else{
        open('http://localhost:' + port);
    }
});

And this is the index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <h2>The Button Element</h2>
  <form action="" method="post">
    <button name="foo" value="send">Send</button>
</form>
</body>
</html>

I am pretty sure the problem is how I am handling the HTML button, but I dont know better. The error I receive when I click on it is: Cannot POST /.

try replace your button with I can't see any issues with your code off the bat :/ — Prodigle, Aug 13 '18 at 11:18
Still the same error. I appreciate you trying. Maybe you can help me though :) — Ezeeroc, Aug 13 '18 at 11:21
Seems similar to: https://stackoverflow.com/questions/35931135/cannot-post-error-using-express — vladwoguer, Aug 13 '18 at 11:26
Are you opening "index.html" manually ? Try to open "localhost:3000" in browser and then click send. — Vishal-L, Aug 13 '18 at 11:33
Any errors on the server log? I tried your code here and it is ok. — vladwoguer, Aug 13 '18 at 11:48
@vladwoguer no, nothing. It is curious. So when you try the code the `message.txt` is created, right? — Ezeeroc, Aug 13 '18 at 12:26
@vladwoguer Until now I opened it in Mozilla, but when I opened it in Chrome, i received this error in console: `Refused to load the image '' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.` — Ezeeroc, Aug 13 '18 at 12:33
@Coreeze Yes the file is created, I also added respond.write("Created"); And it return it just fine. — vladwoguer, Aug 13 '18 at 15:36
So you used the exact code I posted here... I wonder why it works for you. Do you maybe have other modules installed or...? And I get the same thing- `Cannot POST /`- when I try the code from the similar answer you posted earlier. — Ezeeroc, Aug 13 '18 at 15:37
HELLOOOOOOO IT WOOOORKS! I just created a new folder, put there all the files once again (the `package.json, index.html` etc.), but the only difference is that this time all of them were in the same place, and not in different folders, like the first time. And it works. Thanks a lot! — Ezeeroc, Aug 13 '18 at 15:48

Ezeeroc · Accepted Answer · 2018-08-13T16:14:07.023

1

The problem was with the folders- I messed up calling them in the srcServer.js. It works fine after I put all the files in one folder, this way it was easier to do it right.

edited Aug 13 '18 at 16:14

answered Aug 13 '18 at 16:00

Ezeeroc

185
2
4
14

Linking HTML button to node.js post

1 Answers1