My data not reaching to the backend node server from react server - javascript

my Signup.js file from where the request is initiating,
import React,{ useState } from 'react';
import isEmail from 'validator/lib/isEmail';
import isEmpty from 'validator/lib/isEmpty';
import equals from 'validator/lib/equals';
import { Link } from 'react-router-dom';
import { showErrMsg,showSuccessMsg } from '../Helpers/messages.js';
import { showLoading } from '../Helpers/loading';
import { signup } from '../../api/auth';
import './SignUp.css';
const SignUp = () => {
// filled this for testing purpose
const[formData,setFormData] = useState({
username: 'shivshankar',
email:'shivshankarkumar.pusa#gmail.com',
password:'1234',
password2:'1234',
successMsg:false,
errorMsg:false,
loading:false,
});
const {
username,
email,
password,
password2,
successMsg,
errorMsg,
loading,
} = formData;
const handleSubmit = (e) => {
e.preventDefault();
if(isEmpty(username) || isEmpty(email) || isEmpty(password) || isEmpty(password2)){
setFormData({
...formData,errorMsg : "All fields are Required"
})
}else if(!isEmail(email)){
setFormData({
...formData , errorMsg : "Invalid Email"
})
}else if(!equals(password,password2)){
setFormData({
...formData , errorMsg: "Passwords do not Match"
})
}else{
const { username , email , password} = formData;
const data = { username , email , password};
setFormData({
...formData,
loading : true,
})
signup(data)
.then(response => {
console.log("Axios signup success",response);
setFormData({
username:"",
email:"",
password:"",
password2:"",
loading:false,
successMsg:response.data.successMessage
})
})
.catch(err => {
console.log("Axios post error : " , err);
setFormData({...formData, loading : false});
});
}
}
my auth.jjs file from the axios post request is generating
import axios from 'axios';
export const signup = async (data) => {
const config = {
headers : {
'Content-Type' : 'applicaion/json',
},
};
console.log(data);
const response = await axios.post('/api/auth/signup', data, config);
return response;
};
now in server side server.js
const express = require('express');
const app = express();
const cors = require('cors');
const morgan = require('morgan');
const connectDB = require('./database/db');
const authRoutes = require('./routes/auth');
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended : true }));
app.use(bodyParser.json());
app.use(cors());
app.use(morgan('dev'));
app.use(express.json());
app.use('/api/auth',authRoutes);
// app.post('/api/auth/signup',(req,res) => {
// console.log("inside signup");
// // res.send("api/auth/signup");
// });
connectDB();
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`listening to port ${port}`));
auth.js file for authRoutes`
const express = require('express');
const router = express.Router();
const { signupValidator, validatorResult } = require('../middleware/validator');
router.post('/signup', signupValidator, validatorResult);
module.exports = router;
my validator.js file
const { check, validationResult } = require('express-validator');
exports.signupValidator = [
check('username').not().isEmpty().trim().withMessage('All fields are required'),
check('email').isEmail().normalizeEmail().withMessage('Invalid Email'),
check('password').isLength({ min : 6 }).withMessage('Password must be 6 character long'),
];
exports.validatorResult = (req, res, next) => {
// console.log("request body" ,req.body);
const result = validationResult(req);
const hasErrors = !result.isEmpty();
// console.log(result);
if(hasErrors){
const firstError = result.array()[0].msg;
console.log("has errors",hasErrors);
console.log("result",result);
return res.status(400).json({
message : firstError,
});
}
next();
};
the data is being sent from front-end axios, but the data is not reaching to the back-end node server,
when i console.log(req.body) or console.log(data) it says undefined.
i am stuck here, can anyone please help me??
get this output in the console.
[0] result Result {
[0] formatter: [Function: formatter],
[0] errors:
[0] [ { value: undefined,
[0] msg: 'All fields are required',
[0] param: 'username',
[0] location: 'body' },
[0] { value: undefined,
[0] msg: 'Invalid Email',
[0] param: 'email',
[0] location: 'body' },
[0] { value: undefined,
[0] msg: 'Password must be 6 character long',
[0] param: 'password',
[0] location: 'body' } ] }
[0] POST /api/auth/signup 400 34.535 ms - 37

You have a typo in your auth.js file, you have set the Content-Type headers incorrectly it should be application/json & not applicaion/json
import axios from 'axios';
export const signup = async (data) => {
const config = {
headers : {
'Content-Type' : 'application/json', //this should be application/json
},
};
console.log(data);
const response = await axios.post('/api/auth/signup', data, config);
return response;
};

You need to require the routes after your app.use(bodyParser.json()); statement
So move const authRoutes = require('./routes/auth'); to after app.use(bodyParser.json());

Related

Test a POST Http request from a local node server in REACT

I need to make unit tests for some post requests but i dont understand how.I tried with mswjs but the test passes because i'm missing something and i dont know what.I tried to test the requests in an usual way but i wasnt able to put my conditions there and it was sending only 200 status code..
To start with,this is my folder structure:
+main folder
++nodeServer
+++public
+++routes
++public
++src
+++tests
This is my try for testing the post request to /subscribe endpoint,where i should send an email as a payload and get the response that the payload was received succesefully.
subscribeFetch.test.js:
import {setupServer} from 'msw/node'
import {rest} from 'msw'
const handlers = [
rest.post("/api/subscribe",(req,res,context)=>{
if (!req.body || !req.body.email) {
return res(context.status(400).json({ error: "Wrong payload" }));
}
if (req.body.email === 'forbidden#email.com') {
return res(context.status(422).json({ error: "Email is already in use" }));
}
return res(
context.status(200),
context.json({email:'gigi#gmail.com'})
)
})
]
const server = setupServer(...handlers)
beforeAll(()=>server.listen())
afterAll(()=>server.close())
afterEach(()=>server.resetHandlers())
test('should send post request to the server',async()=>{
server.use(
rest.post('/api/subscribe',(req,res,ctx)=>{
return res(
expect (ctx.status()).toBe(200)
)
}
)
)
})
//export {handlers,rest}
This is the subscribe post request function that i need to test:
import { validateEmail } from './email-validator.js'
export const sendSubscribe = (emailInput) => {
const isValidEmail = validateEmail(emailInput)
if (isValidEmail === true) {
sendData(emailInput)
}
}
export const sendHttpRequest = (method, url, data) => {
return fetch(url, {
method: method,
body: JSON.stringify(data),
headers: data
? {
'Content-Type': 'application/json'
}
: {}
}).then(response => {
if (response.status >= 400) {
return response.json().then(errResData => {
const error = new Error('Something went wrong!')
error.data = errResData
throw error
})
}
return response.json()
})
}
const sendData = (emailInput) => {
sendHttpRequest('POST', '/api/subscribe', {
email: emailInput
}).then(responseData => {
return responseData
}).catch(err => {
console.log(err, err.data)
window.alert(err.data.error)
})
}
Files from the server:
app.js:
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const indexRouter = require('./routes/index');
const communityRouter = require('./routes/community');
const analyticsRouter = require('./routes/analytics');
const app = express();
global.appRoot = path.resolve(__dirname);
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/community', communityRouter);
app.use('/analytics', analyticsRouter);
module.exports = app;
index.js from routes folder in the server folder:
const express = require('express');
const router = express.Router();
const FileStorage = require('../services/FileStorage');
/* POST /subscribe */
router.post('/subscribe', async function (req, res) {
try {
if (!req.body || !req.body.email) {
return res.status(400).json({ error: "Wrong payload" });
}
if (req.body.email === 'forbidden#email.com') {
return res.status(422).json({ error: "Email is already in use" });
}
const data = {email: req.body.email};
await FileStorage.writeFile('user.json', data);
await res.json({success: true})
} catch (e) {
console.log(e);
res.status(500).send('Internal error');
}
});
/* GET /unsubscribe */
router.post('/unsubscribe', async function (req, res) {
try {
await FileStorage.deleteFile('user.json');
await FileStorage.writeFile('user-analytics.json', []);
await FileStorage.writeFile('performance-analytics.json', []);
await res.json({success: true})
} catch (e) {
console.log(e);
res.status(500).send('Internal error');
}
});
module.exports = router;
Please guys,help me write unit test for subscribe endpoint to match the conditions from index.js file from routes folder in the server folder,thank you in advance!
So,i got the expected result without any library,but i dont know if its a good aproach,but at least it works :
const app = require('../../../personal-website-server/app')
const request = require('supertest')
describe('POST /subscribe', () => {
it('should give 400 status code when email is empty', async () => {
const email = { email: '' }
const response = await request(app).post('/subscribe').send(email)
if (!request.body || !request.body.email) {
expect(response.status).toBe(400)
}
})
it('should give 422 status code when email is forbidden', async () => {
const email = { email: 'forbidden#gmail.com' }
const response = await request(app).post('/subscribe').send(email)
if (request.body === 'forbidden#gmail.com') {
expect(response.status).toBe(422)
}
})
it('should give 200 status code when email is valid', async () => {
const email = { email: 'gigi#gmail.com' }
const response = await request(app).post('/subscribe').send(email)
expect(response.error).toBe(false)
expect(response.status).toBe(200)
expect(response.body.body).not.toBeNull()
})
})

How do i send a success status code to the front end using node.js?

I have recently started using node.js as my backend and I have successfully posted data to the database, the problem that I am facing now is telling the front end that data has been successfully saved. Below is my user route with all the things I have tried commented out.
import { Router } from 'express';
import { IUser } from '../models/user.model';
const User = require('../models/user.model');
// import bcrypt from 'bcrypt';
const bcrypt = require('bcrypt');
const bodyParser = require('body-parser');
// create application/json parser
var jsonParser = bodyParser.json()
// create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })
const userRouter = Router();
userRouter.get('/', (req, res) => {
return res.json('This is the user route');
})
userRouter.post("/register", (req, res: any, next) => {
const user: IUser = new User({
email: res.email,
firstName: res.firstName,
lastName: res.lastName,
password: res.password,
displayName: res.displayName,
cellNumber: res.cellNumber,
});
user.save()
.then((result: any) => {
res.status(201).json({
message: 'Successfully created a new user!',
result: result
});
// res.sendCode(201);
// console.log(res);
// res.status(201).send("User has been successfully created");
//return 'User has been successfully created';
// return Object({ message: "User has been successfully created" });
// return res.status(201).send({
// message: "User has been successfully created",
// statusCode: 201
// })
// return res;
})
.catch((err: any) => {
res.status(500).json({
error: err
})
})
// bcrypt.hash(req.body.password, 10)
// .then((hash: string) => {
// const user = new User({
// email: req.body.email,
// firstName: req.body.firstName,
// lastName: req.body.lastName,
// password: hash,
// displayName: req.body.displayName,
// cellNumber: req.body.cellNumber,
// });
// user.save()
// .then((res: any) => {
// res.status(201).json({
// message: 'Successfully created a new user!',
// result: res
// });
// })
// .catch((err: any) => {
// debugger;
// res.status(500).json({
// error: Error
// })
// })
// })
})
export default userRouter;
which I then export to the server.ts file which is below
import express = require('express');
//import cors from 'cors';
const cors = require('cors');
const bodyParser = require('body-parser')
import { Router } from 'express';
import mongoose from "mongoose";
import "dotenv/config"
//routes
import userRouter from './routes/user.routes';
//Create a new express instance
const app: express.Application = express();
app.get('/', function (req, res) {
res.send('Hello World');
});
// //get router
// var router = express.Router();
//Database
mongoose.connect(`${process.env.MONGO_URI}`,
{
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true,
})
.then(() => {
console.log("Connected to MongoDB")
})
.catch(() => {
console.log("Connection to Database has failed")
})
var corsOptions = {
origin: '*',
credentials: true,
methods: '*'
};
const routes = Router();
export default routes;
app.use(routes);
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors(corsOptions));
app.use("/user", userRouter);
routes.use('/user', userRouter);
routes.use(cors(corsOptions));
//use cors middleware
// router.use(cors(options));
app.listen(3000, function () {
console.log('App is listening on port 3000!');
})
What is strange is that when I set breakpoints and analyse the res file, i can see the data that I would have posted from the front end. But the front end gets the 500 status code instead of the 201 that I want to be sending, even though it passes right over that code. I have googled the keys of my keyboard for three days now. So I am at a loss now.
All The latest changes can be found in the GitLab repository below
https://gitlab.com/ShanahJr/SuperiorBallers
You just need to make use of res variable provided by express.
Example -
module.exports.updateData = async (req, res, next) => {
try {
const data = await Editor.edit(req.body.query);
res.status(200).json({ "status": true, "result": 'Edit successful!' })
} catch (error) {
console.log(error)
res.status(200).json({ "status": false, "result": "Request Failed!" })
}
}
This statement - res.status(200).json({ "status": true, "result": 'Edit successful!' })
Nowadays, express also suggests using res.sendStatus(200) over res.status(200)
You can lookup for status codes here
Use res.status(201).send(), res.status().json usually gets blocked by http rules especially when you activate https

POST request body is undefined using koa-body

Its my first time trying to do a POST request with Postman using Koa in my application. I have the router and the body parser but for some reason i still get an error message sayng that my request body is undefined. I think the body parser is not working but i have no idea why.
routes.js
const Koa = require('koa');
const bodyParser = require('koa-body')
const Router = require('koa-router')
const app = new Koa()
const router = new Router()
const Topic = require('./models/topic')
router.post('/topics', bodyParser(), async (ctx) => {
console.log(JSON.stringify(ctx.request.body))
const { name } = ctx.request.body
newPost = {
name: {name}
}
let newTopic = new Topic(newPost)
await newTopic.save(function(error, newPost){
if (error) {
console.log(error)
} else {
res.status(201).json({
message : 'Name added!'
}).send(newPost)
}
})
return
})
app
.use(router.allowedMethods())
.use(router.routes())
module.exports = router
topic.js
const mongoose = require('mongoose')
const Schema = mongoose.Schema
const TopicSchema = new Schema(
{
name: {type: String, required: true },
viewCount: {type: Number, default: 0 }
},
{
timestamps: true
}
)
module.exports = mongoose.model('two/Topic', TopicSchema)
Error message:
{}
Error: two/Topic validation failed: name: Cast to string failed for value "{ name: undefined }" at path "name"
at ValidationError.inspect (/home/node/app/node_modules/mongoose/lib/error/validation.js:47:26) ...
EDIT
Also adding in server.js for further reference
const Koa = require('koa');
const mongoose = require('mongoose');
const router = require('./routes');
const app = new Koa();
app.use(require('koa-body')());
app.use(router.routes());
mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => {
const listener = app.listen(process.env.APP_PORT || 3000, () =>
console.log('App started on port ' + listener.address().port)
)
})
.catch((error) => {
console.log(error)
process.exit(1)
})
// app.proxy = true;
module.exports = app;

req.body is undefined after post request

I'm building a contact form using nodemailer.
To post it I'm using the fetch API.
But for some reason, I get req.body as undefined.
Here's the frontend code:
form.onsubmit = function (e) {
// Stop the regular form submission
e.preventDefault();
const name = document.querySelector("form#contactForm #name").value;
const email = document.querySelector("form#contactForm #email").value;
const textarea = document.querySelector("form#contactForm #textarea").value;
// Collect the form data while iterating over the inputs
var data = {};
data = { name, email, textarea };
console.log(data);
fetch("/mail", {
method: "POST", // or 'PUT'
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
})
.then(async (response) => {
if (response.ok) {
return response.json();
} else {
const resJson = await response.json();
console.log(resJson);
if (typeof resJson.errors === "undefined") {
formStatus.className += " alert-danger";
formStatus.innerText =
"An error occured, Please refresh the page. Or email us at ravchesed#kehilasbelz.be";
return;
}
let ul = document.createElement("ul");
resJson.errors.forEach((err) => {
const li = document.createElement("li");
li.innerText = `${err.msg}: ${err.param} `;
ul.append(li);
console.log(`${err.msg}: ${err.param} `);
});
formStatus.className += " alert-danger";
formStatus.innerText = "";
formStatus.append(ul);
throw response;
}
})
.then((data) => {
console.log("Success:", data);
})
.catch((error) => {
console.error("Error:", error);
});
};
Here's the backend:
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const { check, validationResult } = require("express-validator");
const rateLimit = require("express-rate-limit");
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 10, // limit each IP to 100 requests per windowMs
});
//Here we are configuring express to use body-parser as middle-ware.
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
const mail = express.Router();
// app.post("/mail", (req, res) => {
// console.log(req.body);
// const result = {
// hellop: 5
// };
// res.send(JSON.stringify(result));
// });
mail.post(
"/mail",
// limiter,
[
// username must be an email
check("email").trim().isEmail(),
check("textarea").trim().isLength({ max: 6000 }),
check("name").trim().isLength({ min: 2, max: 20 }),
],
(req, res) => {
console.log(req.body); //undefined
// Finds the validation errors in this request and wraps them in an object with handy functions
const errors = validationResult(req);
if (!errors.isEmpty()) {
console.log(errors); //this returns empty values.
return res.status(422).json({ errors: errors.array() });
}
const mailInfo = {
name: req.body.name,
email: req.body.email,
message: req.body.testarea,
};
main(mailInfo).catch(console.error);
res.json({ success: true });
}
);
const nodemailer = require("nodemailer");
// async..await is not allowed in the global scope, must use a wrapper
async function main(data) {
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
host: "xxx.xxx.com",
port: 587,
secure: false, // true for 465, false for other ports
auth: {
user: "email#example.com", // generated ethereal user
pass: "abc123456", // generated ethereal password
},
});
// send mail with defined transport object
let info = await transporter.sendMail(
{
from: '"John Doe 👍" <robot#Doe.dev>', // sender address
to: "Doe#gmail.com", // list of receivers
subject: `📧 Mail from ${data.name}`, // Subject line
html: `
<b>${data.name}, ${data.email}</b><br>
Phone: ${data.phone}<br>
<br>
Message:
<br>
${data.message}
`, // html body
},
function (err, info) {
if (err) console.log(err);
else console.log(info);
console.log("Message sent: %s", info);
}
);
}
module.exports = mail;
Looked at a lot of posts, but this seems to be a different problem.
after looking at everything again I know where my mistake was but don't understand why.
My file structure is like this:
app.js
mail.js
mail.js was imported to app.js like this:
//handle mail
const mail = require("./mail");
app.use(mail);
in app.js I didn't import body-parser and the middleware because it was already imported in mail.js.
but looks like for some reason that I also have to import it in app.js before mail.js.

node js updating post request body

I am sending request from form (using Angularjs) to create new user. It works and inserts data in my collection. But how i manage to update my data on backend part using node js express. For example i want to check if username is free. I am trying to console.log something when i send post request. But nothing is logging.
Here is my server.js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const restify = require('express-restify-mongoose');
//const userRep = require('./front/core/repository/user/user.repository');
// Middleware
const head = require('./back/midleware/headers.config');
// Models
// TODO provide schema when it will be raedy
const userModel = require('./back/models/user.model');
const app = express();
const router = express.Router();
mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost/users');
// Body parser config
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Headers config
app.use(head.headerConfig);
// Endpoint configuration
restify.serve(router, userModel.UserModel, {
name: 'users',
});
app.use(router);
app.post('/users', (req, res) => {
console.log('req.post')
})
app.post('/users', (req, res) => {
console.log('req.post')
})
app.listen(2000, function () {
console.info('Server is locating on port 2000');
console.info('to access localhost:2000/api/v1');
});
Ajax Request:
import { UserRepository } from '../../core/repository/user/user.repository';
import * as _ from 'lodash';
class HttpExampleController {
constructor(UserRepository) {
this.repository = UserRepository;
this.allUsers = [];
this.user = {};
this.newUser = {
id: 4,
email: "new#email.com",
username: "newUserName",
name: "newName"
};
this.updatedUser = {
email: "updated#email.com",
name: "updatedUserName"
};
this.getAllUsers();
}
getAllUsers() {
this.repository.getAllUsers()
.then(userList => {
this.allUsers = userList;
});
}
// Discuss if we need this method
getUser(userId) {
this.repository.getUser(userId)
.then(user => {
this.user = user;
});
}
createUser(user) {
this.repository.createUser(user)
.then(res => {
this.allUsers.push(res);
});
}
updateUser(user, data) {
let index = _.indexOf(this.allUsers, _.find(this.allUsers, findUser => findUser._id === user._id));
this.repository.updateUser(user._id, data)
.then(res => {
this.allUsers[index] = res;
});
}
deleteUser(user) {
let index = _.indexOf(this.allUsers, _.find(this.allUsers, findUser => findUser._id === user._id));
this.repository.deleteItem(user._id)
.then(res => _.pull(this.allUsers, res));
}
testFunc() {
this.allUsers.shift();
}
}
export { HttpExampleController };

Categories