CODEWITHSUNDEEP
node.jsreactjsexpressaxioshttprequest
user14140042
user14140042

Reputation: 15

HTTP requests receive 404 in browser but work fine in Postman

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));
  }

Upvotes: 0

Views: 2448

Answers (2)

Fravel
Fravel

Reputation: 187

For me it was due to a ' (single quote) at the end of the url. Ex:

/api/path/'

instead of

/api/path/

without the useless single quote at the end.

Upvotes: 0

user14140042
user14140042

Reputation: 15

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!

Upvotes: -1

Related Questions