CODEWITHSUNDEEP
ajaxreactjs
Ha Nguyen
Ha Nguyen

Reputation: 13

Cannot POST ajax request

can anyone explain to me why i cannot post the ajax request. When i run this code the console appear POST http://localhost:8080/api/users 404 (Not Found), and in the networth part the preview is 404 not found In the index.js file 

        var path = require('path');
    var express = require('express');
    var webpack = require('webpack');
    var config = require('./webpack.config.dev.js');

    var app = express();
    var compiler = webpack(config);
    var bodyParser = require('body-parser');
    var users = require('./server/routes/users');

    app.use(bodyParser.json());

    app.use('/api/users', users);

    app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.publicPath
    }));

    app.use(require('webpack-hot-middleware')(compiler));

    app.get('*', function(req, res) {
      res.sendFile(path.join(__dirname, 'index.html'));
    });

    app.listen(8080, 'localhost', function(err) {
      if (err) {
        console.log(err);
        return;
      }

      console.log('Listening at http://localhost:8080');
    });

and the users file 

    var express = require('express')
    var router = express.Router()

    // middleware that is specific to this router
    function validateInput(data) {
      let errors = {};

      if (Validator.isNull(data.username)){
        errors.username = "This field is required";
      }
      if (Validator.isEmail(data.email)) {
        errors.email = "Email is invalid";
      }
      if (Validator.isNull(data.password)){
        errors.password = 'This field is required';
      }
      if (Validator.isNull(data.passwordConfirmation)){
        errors.passwordConfirmation = 'This field is required';
      }
      if (Validator.equals(data.password, data.passwordConfirmation)){
        errors.passwordConfirmation = 'Password must match';
      }
      return {
        errors,
        isValid: isEmpty(errors)
      }
    }

    router.post('/api/users', (req, res) => {

          console.log('runiing the router/post');
          console.log(req.body);
          const {errors, isValid} = validateInput(req.body);

          if (!isValid) {
            res.status(400).json(errors);
          }

    });

    module.exports = router

Upvotes: 1

Views: 502

Answers (1)

Shanil Fernando
Shanil Fernando

Reputation: 1322

in users.js file the function should be 

router.post('/', (req, res) => {

          console.log('runiing the router/post');
          console.log(req.body);
          const {errors, isValid} = validateInput(req.body);

          if (!isValid) {
            res.status(400).json(errors);
          }

    });

Because index.js have already resolved /api/users part in the request url http://localhost:8080/api/users at this point. So you only have to map after the /api/users in your users js file.

For example, if you have following function in users.js file

router.post('/:id', (req, res) => {
      ...
    }

It will resole to the path http://localhost:8080/api/users/1

Edit In your existing version, 

router.post('/api/users', (req, res) => {
  ...
}

will resolve as http://localhost:8080/api/users/api/users

Upvotes: 2

Related Questions