Hi i am making a blog with node js. And now I am implementing the function to write a post, but there is a problem in this process.
new.ejs is a screen for creating a post.
new.ejs
<div>
<h2> new post </h2>
<form action="/articles" method = "POST">
<h4>title</h4>
<input required type="text" name = "title" / class='form-control'><br>
<h4>description</h4>
<textarea name="description" class = 'form-control'></textarea><br>
<h4>contents</h4>
<textarea id="mytextarea" name="contents" rows = '10'></textarea>
취소<button type = "submit" class="btn btn-primary">저장</button>
</form>
</div>
and
article.js
var express = require("express");
var app = express();
var router = express.Router();
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
router.get("/", function (req, res) {
res.send("article");
});
router.get("/new/home", function (req, res) {
res.render("articles/index");
});
router.get("/new", function (req, res) {
res.render("articles/new");
});
router.post("/", function (req, res) {
console.log(req.body.title);
});
module.exports = router;
Here, when req.body.title is executed, req.body becomes undefined. And in the code editor window, a sentence stating that bordyParser has been deprecated appears as the middle line is drawn. How to solve it
The EJS file is POSTing to /articles, but your POST route in the NodeJS is /.
To fix the 'body-parser is deprecated' messages, change the code as follows :-
...
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
...
to
...
app.use(express.urlencoded());
...
Body Parser is now part of Express itself.
Related
I am trying to output the value of title which i entered in the form in the /Add-Product link
Here is my app.js code
const http= require('http');
const path= require('path');
const express= require('express');
const app= express();
app.set('view engine', 'ejs');
app.set('views', 'Views');
app.use(express.static(path.join(__dirname, 'Public')));
app.get('/', (req, res, next)=>{
res.render('shop');
});
app.get('/admin', (req, res, next)=>{
res.render('admin');
});
app.get('/add-product', (req, res, next)=>{
res.render('addProduct');
});
app.post('/add-product', (req, res, next)=>{
console.log(req.body.title); //uable to display value of req.body.title
res.redirect('/');
});
app.listen(3000);
form part of the addProduct.ejs
<main>
<form action="/add-product" method="POST">
<p>Title</p>
<input type="text" name="title" id="title"/>
<p>Price</p>
<input type="text" name="price"/>
<p>Description</p>
<input type="text" name="description"/>
<button type="submit">Submit</button>
</form>
</main>
Unable to figure why the req.body.title is throwing an error as:Cannot read property 'title' of undefined
Please guide me on what i am missing.
By default, form submits the data to server in the content type of application/x-www-form-urlencoded. So you need to configure node js to receive this type of content. Use bodyParser to read the request body with json and encoded content.
Usage:
var bodyParser = require('body-parser');
app.use(bodyParser.json()); // support json encoded bodies
app.use(bodyParser.urlencoded({ extended: true }));
I am trying to implement csrf tokens for the first time and i am running into issues. I've been working at it for a few hours and haven't been able to solve it. Below is the error I am getting:
ForbiddenError: invalid csrf token
app.js
const express = require('express')
const app = express()
const router = require('./router')
const cookieParser = require('cookie-parser')
const session = require('express-session')
const flash = require('connect-flash')
const dotenv = require('dotenv')
const csrf = require('csurf')
dotenv.config()
app.use(express.urlencoded({extended: false}))
app.use(express.json())
app.use(express.static('public'))
app.use(cookieParser('secret'))
app.use(session({
secret: 'secret',
cookie: {maxAge: null},
resave: false,
saveUninitialized: false
}))
app.use(flash())
app.set('views', 'views')
app.set('view engine', 'ejs')
app.use(csrf())
app.use(function(req, res, next) {
res.locals.csrfToken = req.csrfToken()
next()
})
app.use('/', router)
app.use(function (req, res, next) {
res.status(404).render('404')
})
app.use(function (err, req, res, next) {
console.error(err.stack)
res.status(500).render('404')
})
app.listen(process.env.PORT)
router.js
const express = require('express')
const multer = require('multer')
const multerConfigOpts = require('./multer.config')
const router = express.Router()
const userController = require('./controllers/userController')
const csrf = require('csurf')
var csrfProtection = csrf({ cookie: true })
// set multer configuration options
const upload = multer(multerConfigOpts)
router.get('/', userController.home)
router.get('/about', userController.about)
router.get('/employer', userController.employer)
router.get('/jobSeeker', userController.jobSeeker)
router.get('/ourProcess', userController.process)
router.get('/contact', userController.contactUs)
// Talent Request Post related routes
router.post('/talentrequest',upload.none() ,userController.requestTalent)
// Job Request Post related routs
router.post('/jobrequest', csrfProtection, upload.single('resume'), userController.requestJob)
module.exports = router
Example of my form:
<form action="/jobrequest" method="POST" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<button type="submit" class="btn--form-submit">Submit</button>
</div>
</form>
There are more data fields, I just didn't want to bloat the question with unnecessary code. I've been reading that others are having similar issues when using multipart in the form, but I can't seem to figure it out.
I know that my token is being generated inside the form but I'm not sure if its being passed through properly. Any help or pointers would be appreciated. Thank you
So I was able to find a work around solution by adding the following to my form and removing the input hidden field from my form
form action="/talentrequest/*?_csrf=<%= csrfToken %>*" method="POST" enctype="multipart/form-data">
Everything works as it should. Can anyone explain the potential risks involved with this?
I'm trying to do the most basic POST request in express but my req.body keeps returning undefined, I've googled similar issues but I can't find the solution that would work for me.
The form in HTML:
<form method="POST" class="vote">
<input type="text" name="test">
<button type="submit">TEST VOTE</button>
</form>
and in my post.js file
const express = require('express');
const app = express();
app.use(express.urlencoded({
extended: true
}));
app.post('/test', function (req, res) {
console.log('post to /test');
var data = req.body.test;
console.log(data);
What am I doing wrong here?
Try using body-parser node module which will parse the post data and append it on request object so that you can access it.
body-parser extract the entire body portion of an incoming request stream and exposes it on request.body.
const express = require('express');
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/test', function (req, res) {
console.log('post to /test');
var data = req.body;
console.log(data);
//rest of the code
}
Actually you didn't set the "action" field in your "form" tag.
You have to set your action field to
action= "/test"
How do I post a value which is on the client-side and get it on the server-side.
example:
<form action="/myform" method="POST">
<input type="text" name="mytext" required />
<input type="submit" value="Submit" />
</form>
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.get('/myform', function(req, res){
var myText = req.body.mytext; //mytext is the name of your input box
res.send('Your Text:' +myText);
});
app.listen(3000)
<form action="http://127.0.0.1:3000/myform" method="post">
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
//Note that in version 4 of express, express.bodyParser() was
//deprecated in favor of a separate 'body-parser' module.
app.use(bodyParser.urlencoded({ extended: true }));
//app.use(express.bodyParser());
app.post('/myform', function(req, res) {
var myText = req.body.mytext; //mytext is the name of your input box
res.send('Your Text:' +myText);
});
Your code seems to be fine, apart from wrong method name. In HTML form you have mentioned POST method but at server you are listening to GET method. So just change, app.get('/myform', to app.post('/myform',.
It should work.
this is my first time when I'm setting up the server and need help. So my goal is to set up server by NodeJS and Expresss. Let's say we have an app with Admin and Users. When Admin clicks a button, it sends some data for the server, then Users can fetch the data.
So this is my server set up:
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => res.send('Hello World!'))
app.listen(port)
I can add some post method, let's say:
app.post('/', (req, res) => ....);
So I can prepare server reaction for listening the POST method, but I have no idea how to send some data from my app by clicking an button (I mean calling this post method). I've watched a bunch of tutorials and haven't seen any real-world exercises.
To receive the POST parameters, you need the body-parser module, which you can include in your app.js like this,
var bodyParser = require('body-parser');
app.use(bodyParser.json());
And here is how you can receive your form fields which are being sent through the POST method,
app.post('/', function(req, res) {
var someField1 = req.body.some_form_field;
var someField1 = req.body.form_field1;
});
Hope this helps!
On your express server
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.post("/", (req,res) => {
res.send("Hello");
});
On your webpage/app, You can use axios.
Lets say your express server running with localhost and port 4000.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var instance = axios.create({
baseURL: "http://localhost:4000" //use your express server's url(address) and port here
});
function onclick(){
instance.post("/").then( response => {
//response.data will have received data
}
}
</script>
You can use this function and call it on your button click
You can simply use jquery in your HTML page like this to call your api:
$("button").click(function(){
$.post("/", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
And Send data from your api:
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/', function(req, res) {
var obj = {};
obj.name="hello";
obj.lname="world"
res.json(obj);
});
Example:
HTML:
Your form elements should have name (it is mandatory) to access these in post body request.
<form method="post" action="/">
<input type="text" name="Name" />
<br>
<input type="text" name="Telephone" />
<br>
<input type="submit" />
</form>
app.js
const express = require('express')
const app = express()
const port = 3000
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.post('/', (req, res) => {
name = req.body.Name;
telephone = req.body.Telephone;
res.render('somefolder/index', {
name: name,
telephone: telephone,
});
// Above code is for reference if you want to load another page after post complete and get posted values in this page too.
res.end();
});