AJAX post to localhost returning error 404

I am attempting to use pushState to access a virtual path in my server. The desired flow of the code below should be

  1. User calls up login form on client side
  2. Window location changes to virtual path (which I have a middleware handling by the way)
  3. User fills form and submits via AJAX (At this point, my impression is that the request url is the one in the contrived push state and not the actual href, hence the middleware at my server should handle it)

However, this approach does not achieve my desired goal which is to process the submitted fields at the “fake” path and return output for me at the client side. First, I’ll post the front end code.

    $("nav ul li a").click(function(e){
						e.preventDefault();
						history.pushState({username: undefined}, "", "/login");
					}).colorbox({inline: true, width: '65%', onClosed: function(){
						if ($("section").has("nav").length) { // Meaning if user is not signed in but closes colorbox, go back to home url
							history.back();
						}
					}});

			// login logic. if auth user, remove form
			$(".auth_form").on("submit", function(e) {
				e.preventDefault();

				$.post("http://localhost:1717/", $("#auth_form form").serialize(), function(data){
					console.log(data);
					if (data.sessName.length > 1 ) {
						history.replaceState({username: data.sessName}, "", data.sessName);
						$("nav").replaceWith($("#logged-in").show().css("margin-left", "25%"));
						$.colorbox.close();
					}
					else {
						$(".message-text").html(data.errText);
					}
				});
			});

And my server side code goes thus

    app = app.use(static(__dirname + "/public"))/* a few other middlewares here, then */
    .use(cookieSession({secret: "secret", maxAge: this.maxAge + (60 * 60 * 24 * 1000)}))
    .use("/login", login);

    function login (req, res, next) {
	
	var params = queryParser.parse(req.body), resObj = {errText: "", sessName: ""}; console.log(params);
	
	db.query("SELECT * FROM `users` WHERE `email`=? AND `password`=?", [params.email, params.pwd], function(err, rows) {
		if (err) throw err;
		if (rows.length >= 1) {
			req.session.name = params.email.split("@")[0];
			resObj.sessName = req.session.name;
			res.end(resObj);
		}
		else {
			resObj.errText = "Incorrect email or password";
			res.end(resObj);
		}
	});
	next();
    }

Now, there are no errors returned at my server. The error is reported in the client console, after a successful AJAX trip. I guess it’s successful since the error reads

POST http://localhost:1717/ 404 (Not Found)
XHR finished loading: POST “http://localhost:1717/”.

What could I possibly be doing wrong?

EDIT: The back end technology is NODEJS. Just thought I should chip that in since Sitepoint neither has it in the tags nor in languages.

does localhost:1717 answer HTTP requests at all (e.g. tested with curl)?

Of course. The AJAX call was sent from the index document statically served on that port. Kindly see first line of server side code where I use the serve-static module.

It’s perplexing that the very same path returns a 404; not even the “fake” one.

but I don’t see where you have defined a route for / (which is the route you’re requesting, and you’re not requesting a static file either)

This line invokes the serve-static middleware which I have already require()d earlier on where I declared my variables. That line tells the module to route requests from the /public directory relative to where my server is running from. Therefore I have no need to explicitly return index.html nor their absolute paths.

According to my understanding of this.

but that (implicit index.html) is an option to the serve-static middleware that you do not have set.

you:

app.use(static(__dirname + "/public"))

documentation:

app.use(serveStatic('public/ftp', {'index': ['default.html', 'default.htm']}))

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.