In the front-end script, I have a code like this to create the POST request to the server.
var xhr = new XMLHttpRequest();
xhr.open("POST", "/visitor/detect/1", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
value: "test"
}));
Then here is my route in my server
router.post('/visitor/detect/1', (req, res) => {
console.log(req.body);
res.redirect('/visitor/login');
});
I'm expecting to redirect the page to /visitor/login after a successful post request, but it didn't. However, it is displaying the req.body.
What is the problem, and what way can I do to successfully send the post request from the front-end and redirect the page to the back-end?
You cannot redirect with the ajax request the way you are trying to do it. Here is an snippet that does what I think you are trying to do. You might also look into the fetch api instead of using XMLHttpRequest.
On the server:
app.post("/visitor/detect/1", (req, res) => {
console.log(req.body);
res.json({ redirectRoute: "/visitor/login" });
});
Client side:
var xhr = new XMLHttpRequest();
xhr.open("POST", "/visitor/detect/1", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
value: "test"
}));
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
var jsonResponse = JSON.parse(xhr.responseText)
window.location.replace(jsonResponse.redirectRoute)
}
}