I've deployed my app to Heroku and it builds fine and my React app is rendering pages correctly. However, when I try to submit a POST request to sign up a user or log a user in, I get a 404 error. I do not, however, have this problem when submitting requests from Postman. My front end is using React and Axios for submitting requests. Server is using Nodejs and Express. I was thinking it had something to do with CORS, but I've tried configuring CORS and it hasn't resolved the issue.
Front-end code for POST request:
axios.defaults.withCredentials = true;
signUp: function(userInfo) {
userInfo = {
email: userInfo.email,
password: userInfo.password,
firstName: userInfo.firstName,
lastName: userInfo.lastName,
mobileNumber: userInfo.mobileNumber
}
return axios.post('/users/signup', userInfo);
Server file
const express = require('express');
const session = require('express-session');
const passport = require('./config/passport');
const path = require("path");
const cors = require('cors');
const cookieParser = require("cookie-parser");
const app = express();
const SequelizeStore = require('connect-session-sequelize')(session.Store);
const db = require('./models');
const sessStore = new SequelizeStore({
db: db.sequelize
});
const http = require('http').Server(app);
const routes = require('./routes');
const PORT = process.env.PORT || 3000;
const corsConfig = {
origin: "https://example.herokuapp.com/",
credentials: true
}
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'));
app.use(cors(corsConfig));
}
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(session({
secret: process.env.SESSION_SECRET,
name: process.env.SESSION_NAME,
store: sessStore,
resave: false,
saveUninitialized: false }));
app.use(cookieParser());
app.use(passport.initialize());
app.use(passport.session());
app.use(routes);
app.get("*", function(req, res) {
res.sendFile(path.join(__dirname, "./client/build/index.html"));
});
db.sequelize.sync().then(() => {
http.listen(PORT, () => console.log(`Listening at http://localhost:${PORT}`));
});
Routes index file
const router = require("express").Router();
const usersRoutes = require('./users');
const isAuthenticated = require('../../config/middleware/isAuthenticated');
router.use("/users", usersRoutes);
Users Routes file
const router = require("express").Router();
const passport = require('../../config/passport');
const usersController = require("../../controllers/usersController");
router
.route('/signup')
.post(usersController.createNewUser);
router
.route('/login')
.post(passport.authenticate('local'), usersController.logUserIn);
Controller
createNewUser: function(req, res) {
db.User.create({
email: req.body.email,
password: req.body.password,
firstName: req.body.firstName,
lastName: req.body.lastName,
mobileNumber: req.body.mobileNumber
})
.then(() => res.sendStatus(200))
.catch((err) => res.send(err));
}
I resolved this. The url in the axios call was missing a piece. The reason this worked locally is because I had the proxy in React set to include the missing piece so axios calls done locally were always being sent to the right url, but they were not being sent to the right url in prod. Really relieved it was something so simple!
Related
I created a route and controller for my sign up.
Here's my route:
const express = require("express");
const router = express.Router();
const { signup } = require("../../controllers/auth");
router.post("/signup", signup);
module.exports = router;
And here's my controller:
exports.signup = () => (req, res) => {
const { name, email, password } = req.body;
res.json({
user: { name, email, password },
});
};
Inside my server.js file I register both:
const express = require("express");
const morgan = require("morgan");
const cookieParser = require("cookie-parser");
const cors = require("cors");
const mongoose = require("mongoose");
require("dotenv").config();
// routes
const blogRoutes = require("./routes/blog");
const authRoutes = require("./routes/auth");
// app
const app = express();
// db
mongoose
.connect(process.env.DATABASE, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log("DB connected!"));
// middlewares
app.use(morgan("dev"));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cookieParser());
// cors
if (process.env.NODE_ENV == "development") {
app.use(cors({ origin: `${process.env.CLIENT_URL}` }));
}
// routes middleware
app.use("/api", blogRoutes);
app.use("/api", authRoutes);
// port
const port = process.env.PORT || 8000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
Now on my POSTMAN, I tried to put the data using POST http://localhost:8000/api/signup with the header and raw setup right.
{
"name": "SyRyan",
"email": "syryan#gmail.com",
"password": "brace1010"
}
The database is connected but the postman takes forever to load the json request back. Am I making any mistakes here? Please help!
I think that the problem is that signup is a function that returns a function, but it should be just a function that receives req & res as parameters:
exports.signup = (req, res) => {
const { name, email, password } = req.body;
res.json({
user: { name, email, password },
});
};
Been working on figuring out user login/register with react and why my axios is not calling .then on successful post request to my api.
Server.js
//Node packages
const path = require('path');
//Required NPM Packages
const express = require('express'),
app = express(),
session = require('express-session'),
cors = require('cors'),
bodyParser = require('body-parser'),
mongoose = require('mongoose'),
MongoStore = require('connect-mongo')(session),
methodOverride = require('method-override'),
passport = require('passport'),
LocalStrategy = require('passport-local');
//MongoDB models.
const Product = require('./models/Product');
const User = require('./models/User');
//Routes.
const indexRoute = require('./routes/index');
const demoRoute = require('./routes/demos');
const blogRoutes = require('./routes/blogs');
const userRoutes = require('./routes/users');
//Port.
const PORT = 5000;
const DATABASE_URI = require('./config/database');
const mongoOptions = { useNewUrlParser:true, useUnifiedTopology:true};
//Connect to mongoDB.
mongoose.connect(DATABASE_URI, mongoOptions);
const sessionOptions = {
secret: 'somesecretword',
resave: true,
saveUninitialized: true,
store: new MongoStore({ mongooseConnection: mongoose.connection })
}
//set session options
app.use(session(sessionOptions));
//Setup body-parser.
app.use(express.json());
app.use(bodyParser.urlencoded({extended:true}));
//Allow express/node to accept Cross-origin resource sharing.
app.use(cors());
app.use(express.static(path.join(__dirname, '..','client','build')));
//Setup method override.
app.use(methodOverride("_method"));
//Congifure passport.
app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());
app.use(function(req,res,next){
res.locals.currentUser = req.user;
next();
})
//register API routes to express.
app.use('/', indexRoute);
app.use('/demos', demoRoute);
app.use('/blogs', blogRoutes);
app.use('/users', userRoutes);
// //Register React routes to express
app.use('about', express.static(path.join(__dirname, '..','client','build')));
app.get('*', (req,res)=> {
res.sendFile(path.join(__dirname,'..','client','build','index.html'));
})
//listen to established port.
app.listen(PORT, () => {
console.log(`The server has started on port ${PORT}!`);
});
module.exports = app;
login route
router.post('/login', passport.authenticate('local'), (req, res) => {
console.log('success');
res.json({authenticated:true});
});
React front-end function
async function handleRegister(evt){
//Prevent default form redirect.
evt.preventDefault();
//Create a new user objec to pass into axios
const user = {
username: username,
password: password
}
//Send axios post request to nodeJS API.
await axios.post("http://*******/users/register", user)
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});
//Push react history back to index page.
}
Right now I'm using Passport.js with passport.local.mongoose Strategy and connect-mongo. When I go ahead and post to the login route with the correct users information, the callback on the back end returns success. As per the passport.authenticate method if auth is a success then we console.log and send res.json.
I've tried to use res.send, res.json, res.sendStatus but none of them seem to work. Am I missing some sort of setup with passport? As far as the documentation goes for passport-local-mongoose I shouldn't have to establish a config.
All I want to happen is that when I login I send a redirect to react and push the response route to react-router's history object via history.push(routeUrl);
I found out the problem. Was just an error on my part. Was working with the register function and not the login in function. The issue wasn't that I wasn't getting a response... Probably a queue for a break.
When I wanna make a POST req using Postman where I already set the content-type to application/json and I console.log the req.body.name or sth else it only returns undefined.
Here's the code:
index.js
const app = express();
const mongoose = require("mongoose");
const dotenv = require("dotenv");
const authRoute = require("./routes/auth");
dotenv.config();
mongoose.connect(
process.env.DB_CONNECT,
{ useNewUrlParser: true, useUnifiedTopology: true },
() => console.log("connected to mongoDB")
);
// Middleware
app.use(express.json());
// Routes
app.use("/api/user", authRoute);
// Run Server
const PORT = 5000;
app.listen(PORT, () => console.log(`server running on port ${PORT}`));
auth.js
const router = require("express").Router();
const User = require("../model/User");
router.post("/register", async (req, res) => {
const user = new User({
name: req.body.name,
email: req.body.email,
password: req.body.password,
});
console.log(req.body.name);
});
module.exports = router;
Since you are not using body parser and using only express.json() send requests as raw then pick JSON. The format that you should write looks like this:
{
"name": "Some name",
"lastname": "...."
}
Here is how your postman should look like:
Install Body parser as:
npm install --save body-parser
and then update your index.js file as:
var bodyParser = require('body-parser')
app.use( bodyParser.json() ); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
just add these line after
// Middleware
app.use(express.json());
for example
// Middleware
app.use(express.json());
app.use(express.urlencoded{extended: true})
This express setting will allow you to parse html-body
I'm current working on a web application using Node.js with Express in the back-end and React.js in the front end. In attempting to post user data to the Node server, through axios, I am running into an issue. When I make a post with the x-www-form-urlencoded content type, the front end will post to the server but the entire JSON of the posted data appears in the key field of the first element. When I change the content type to json it stops posting anything from the front end. I have tried cUrling to the server, and curling a JSON post will get accepted by the server.
React code to post to server
handleSubmit()
{
var form=this;
var axiosConfig = {
headers: {
'content-type': 'application/json; charset=utf-8'
}
}
axios.post('http://localhost:8080/api/login/', {
'username': form.state.username,
'password': form.state.password
}, {headers: {'content-type': 'application/json'}});
};
Server code for api endpoint
//From server.js
const express=require('express');
const session=require('express-session');
const bodyParser=require("body-parser");
const path = require('path');
var login = require('./routers/login')
var port = process.env.PORT || 8080;
var app=express();
app.use(session({'secret': 'thealphabetbackwardsiszyxwvutsrqponmlkjihgfedcba'}));
app.use(bodyParser.urlencoded({ extended: true}));
app.use(bodyParser.json());
//...
app.use('/api/login', login);
//from login.js
/* Router for login system
When user attempts to log in, check their credentials
If the user successfully logs in, create a session
If user enters invalid credentials prompt them
*/
const path = require('path');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const user = require("./../models/UserSchema")
mongoose.connect('mongodb://localhost/newt');
const express = require('express');
const router = express.Router();
router.get('/', function (req, res)
{
console.log("Test");
})
router.post('/', function(req, res)
{
console.log(req.body);
res.end();
})
// To create test user use path localhost:8080/api/login/testing
router.get('/test', function (req, res)
{
var db = mongoose.connection;
var test = new user({
username: "joesephschomseph",
email: "testUser#test.com",
fname: "Joe",
lname: "Schmoe"
})
test.save();
console.log("Created test user!");
});
module.exports = router
npm install --save const body-parser
in app.js include const bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());
remove the single quotes from your 'username' and 'password'
console.log(req.body);
I built an index.js file which sends SMS based on body input while posting with Postman. The code is working and looks like this (I have hidden my apiKey and apiSecret for this preview)
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const Nexmo = require('nexmo');
const nexmo = new Nexmo({
apiKey: 'hidden.apiKey',
apiSecret: 'hidden.apiSecret'
});
app.post('/send', (req, res) => {
// Sending SMS via Nexmo
nexmo.message.sendSms(
'4542542445', req.body.toNumber, req.body.message, {type: 'unicode'},
(err, responseData) => {if (responseData) {console.log(responseData)}}
);
});
const server = app.listen(3000);
console.log("starting server")
It woks fine and I receive an SMS message when I run the file, and a post to the route using Postman.
I am trying to implement the same in my bigger project, where I have separate client and server folders representing my frontend and backend.
When I add the code to my app.js file, I run into Status code 404 not found error. Here is the code of my app.js:
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
const {sequelize} = require('./models')
const config = require('./config/config')
const Nexmo = require('nexmo')
const app = express()
app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false}))
app.use(cors())
require('./routes')(app)
sequelize.sync()
.then(() => {
app.listen(config.port)
console.log(`Server started on port ${config.port}`)
})
const nexmo = new Nexmo({
apiKey: 'hidden.apiKey',
apiSecret: 'hidden.apiSecret'
}, {debug: true})
app.post('/send', (req, res) => {
// Sending SMS via Nexmo
nexmo.message.sendSms(
'4542542445', req.body.toNumber, req.body.message, {type: 'unicode'},
(err, responseData) => {if (responseData) {console.log(responseData)}}
);
});
I am asking for help to try figure out what is wrong and why it does not hit the route, instead returning status code 404.
I can share my github or we can talk on discord: soko#8667
I appreciate your thoughts and help.
Routes in express should be written :
let route = require('routes');
app.use('/', route);
I managed to make it work.
I was adding new route while my server was running.
I restarted my PC and ran server and client again and it seems work.