Ajax request keeps failing with bad request when Postman works

Question

So I have been researching for hours and trying different things and have been researching for hours to no avail. The call is to get a JWT token after providing user and pass.

function listenForLogin() {
    console.log('listening')
    $('#submit-btn').on('click', e => {
    e.preventDefault();
    console.log('button-pressed');

    const username = $('#user-input').val().trim();
    const password = $('#pass-input').val().trim();

    var user = {}
    user.username = username;
    user.password = password
    console.log(user);
    $('#user-input').val('');
    $('#pass-input').val('');

    authenticateUser(user);
});
}



//send to autenticate
function authenticateUser(user) {
    console.log('trying to authenticate');
    const settings = {
        url:"/api/auth/login",
        data: JSON.stringify(user),
        dataType: "json",
        method:"POST",
        success: (data) => {
            console.log('authenticated user');
            redirectWithToken(data.authToken, user);
        },
        error: (err) => console.log(err)
    }
    $.ajax(settings);

} 

When it hits the server morgan sees that there was a request but i get back a status of 400. here is my routes

'use strict';

const express = require('express');
const passport = require('passport');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const {JWT_SECRET, JWT_EXPIRY} = require('dotenv').config();

const router = express.Router();

const createAuthToken = function(user) {

  return jwt.sign({user}, 'shade', {
    subject: user.username,
    expiresIn: '7d',
    algorithm: 'HS256'
  });
};

const localAuth = passport.authenticate('local', {session: false});

router.use(bodyParser.json());

router.post('/login', localAuth, (req, res) => {
  const authToken = createAuthToken(req.user.serialize());
  res.json({authToken});
});

const jwtAuth = passport.authenticate('jwt', {session: false});

router.post('/refresh', jwtAuth, (req, res) => {
    console.log('refresh targeted');
    const authToken = createAuthToken(req.user);
    res.json({authToken});
});

router.get('/dashboard/:user', jwtAuth, (req, res) => {
    res.redirect(`https:flow-state.herokuapp.com/dashboard/${req.params.user}`);
})

module.exports = router; 

and I am having a hard time understanding how passport.authenticate('localAuth') works so here is my strategies file just in case you need that

Update: I am getting some kind of error when checking the requests on fiddler.

RESPONSE BYTES (by Content-Type)

~headers~: 132 ~???????~: 11

anybody got any clue what that means?

Answer 1

Did you miss the content-type in the ajax settings? Add contentType: "application/json" in the ajax settings and try again.

Note :

dataType defines the data type expected of the server response.

contentType defines the data type of the content which will be sent to the server. Default is: "application/x-www-form-urlencoded"

Answer 2

8 hours later and a big headache a solution is here. @vignz.pie you were right but I needed to send the 'Content-Type': 'application/json' in the headers along with strigify the data setting the processData: false did the trick. Thanks for the help!

function listenForLogin() {
    console.log('listening')

    $('#submit-btn').on('click', e => {

    e.preventDefault();
    console.log('button-pressed');

    const username = $('#user-input').val().trim();
    const password = $('#pass-input').val().trim();

    $('#user-input').val('');
    $('#pass-input').val('');

    authenticateUser(username, password);

    });
}



//send to autenticate
function authenticateUser(user, pass) {
    var info = {
        username: user,
        password: pass
    };
    console.log(info)
    const settings = {
        url:"/api/auth/login",
        headers: {
            "Content-Type": "application/json" 
        },
        data: JSON.stringify(info),
        processData: false,
        dataType: "json",
        method:"POST",
        success: (data) => {
            console.log('authenticated user');
            redirectWithToken(data.authToken, user);
        },
        error: (err) => console.log(err)
    }
    $.ajax(settings);

}