1. ホーム
  2. node.js

[解決済み】POSTできない/expressを使用するとエラーが発生する

2022-01-27 10:12:10

質問内容

expressを使って簡単なフォームハンドラを作ろうとしています。以下のようなコードでフォームを作成してみました。

<form class="form"  action="/" method="post" name="regForm">              
    <div class="form-group">
        <input type="text" name="username" class="form-control" id="username" placeholder="Username">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

そして、これが私のapp.jsのコードです。

const port = 3000;

var express = require('express'),
    app = express(),
    server = require('http').createServer(app);
var bodyParser = require('body-parser');

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

app.use(bodyParser.urlencoded({
   extended: true;
}));

app.use(bodyParser.json());

app.post('/',function(req,res){
   var username = req.body.username;
   var html = 'Hello:' + username;
   res.send(html);
   console.log(html);
});

server.listen(port);

フォームを送信した後に "CANNOT POST /" というエラーがずっと表示されます。モジュールのようなものを見逃しているのでしょうか?

解決方法を教えてください。

この方法で試してみてください

const port = 3000;

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

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

app.use(bodyParser.urlencoded({
   extended: false
}));

app.use(bodyParser.json());

app.get('/', function(req, res){
  res.render('form');// if jade
  // You should use one of line depending on type of frontend you are with
  res.sendFile(__dirname + '/form.html'); //if html file is root directory
 res.sendFile("index.html"); //if html file is within public directory
});

app.post('/',function(req,res){
   var username = req.body.username;
   var htmlData = 'Hello:' + username;
   res.send(htmlData);
   console.log(htmlData);
});

app.listen(port);

今後のRef.のために留意しておきたいこと :

  1. url encodeをtrueに拡張していた
  2. フォームの取得要求がない場合
  3. バッドプラクティスの一つであるHTMLネームドバリューを使用しています。

ありがとうございます。