Node.js Express - POST Method 전송

이전에 노드에서 GET 방식으로 메소드를 전달했는데

파라미터가 URL에 노출되지 않도록

이번엔 폼에서 POST 방식으로 메소드를 전달해 볼게요.

 

결과 화면

 

 

파라미터가 URL에 노출되지 않습니다.

index.ejs에 저는 post로 보내는 폼을 하나 더 추가해 줬습니다.

 

<%- include("include/header") -%>

<div class="container w-50">
	<div class="form-floating mb-3">
		<h1>익스프레스 메인페이지 입니다.</h1>
	</div>
	<h3>메소드를 GET으로 보내기</h3>
	<form action="result" method="get">
		<div class="form-floating mb-3">
			<div class="form-floating mb-3">
				<input type="text" class="form-control" name="val1">
				<label for="floatingInput">값 1 : </label>
			</div>
			<div class="form-floating mb-3">
				<input type="text" class="form-control" name="val2">
				<label for="floatingPassword">값 2 : </label>
			</div>
		</div>
		<div class="d-grid gap-2 mb-3">
			<input type="submit" class="btn btn-primary" value="전송하기">
		</div>
	</form>
	<h3>메소드를 POST로 보내기</h3>
	<form action="result" method="post">
		<div class="form-floating mb-3">
			<div class="form-floating mb-3">
				<input type="text" class="form-control" name="val1">
				<label for="floatingInput">값 1 : </label>
			</div>
			<div class="form-floating mb-3">
				<input type="text" class="form-control" name="val2">
				<label for="floatingPassword">값 2 : </label>
			</div>
		</div>
		<div class="d-grid gap-2 mb-3">
			<input type="submit" class="btn btn-primary" value="전송하기">
		</div>
	</form>
</div>

<%- include("include/footer") -%>

 

POST로 값을 전송할 땐 HTTP 패킷의 Request Body 영역의 값을 가져와야 합니다.

그러기 위해선 Express의 내장 함수를 사용하거나

외부 라이브러리 Body-parser를 사용해야 합니다.

저는 내장 함수를 사용해서 만들었어요.

 

app.use(express.urlencoded({extened: true}));

 

를 추가해 줌으로써 Body 영역의 값을 가져옵니다.

 

app.js

 

// express
var express = require('express');
var app = express();

// ejs
app.set('views', __dirname + '/views');
app.set("view engine", "ejs");

// bootstrap
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // bootstrap JS
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // bootstrap CSS

app.get('/', function (req, res) {
	res.render('index');
});

app.use(express.urlencoded({extened: true}));

app.get('/result', function (req, res) {
	var val1 = req.query.val1;
    var val2 = req.query.val2;
	res.render('result',{'val1':val1, 'val2':val2});
});

app.post('/result', function (req, res) {
	val1 = req.body.val1;
	val2 = req.body.val2;
	res.render('result',{'val1':val1, 'val2':val2});
});

app.listen(3000, function () {
	console.log("3000포트로 노드서버 오픈!!");
})

 

GET으로 보내던, POST로 보내던 전달받은 값은 변수 val1, val2에 담아서 result로 전달하기 때문에

결괏값을 출력하는 result.ejs는 동일한 파일로 사용했어요.

 

result.ejs

 

<%- include("include/header") -%>

<div class="container w-50">
	<h1>val1 : <%=val1%></h1>
	<h1>val2 : <%=val2%></h1>
	<div class="d-grid gap-2">
		<a href="/" class="btn btn-primary">돌아가기</a>
	</div>
</div>

<%- include("include/footer") -%>