I want to check username/password with a post request using axios like this :

function axiosCall() {
    axios.post('/login', {
        username: document.getElementById("username").innerText,
        password: document.getElementById("password").innerText
    })
        .then(function (problem) {
            if (problem.toString() === "username") {
                lespanUsername.innerHTML = "Pseudo incorrect !";
            } else if (problem.toString() === "password") {
                lespanPassword.innerHTML = "Votre mot de passe est incorrect !";
            }
        })
}

But my express post :

app.post('/login', urlEncodedParser, (req, res) => {
    let username = req.body.username;
    let password = req.body.password;
    if (users.existUser(username)) {
        if (users.validUser(username, password) === true) {
            res.status(200)
            res.redirect("/");
        } else {
            res.status(401)
            res.send("password")
        }
    } else {
        res.status(401)
        res.send("username")
    }
});

Sending html instead of a variable and reloading my page. :

Does anyone have an answer, I haven't found a solution despite a lot of searching. The send("username") works on the examples I found online. Thanks in advance !

CodePudding user response：

You have six separate problems here.

reloading my page

The code you've supplied won't do that.

The most likely reason is that you are calling axiosCall when a form is submitted (or when a submit button is clicked, which amounts to the same thing) and failing to prevent the default behaviour for that.

HTML

See the documentation for send:

When the parameter is a String, the method sets the Content-Type to “text/html”

In HTML, a number of tags (including the start and end tags for html, head and body`) are optional. The browser is generating them when it parses the HTML document you are supplying.

Use res.json instead. axios will parse a JSON response automatically.

Problems you have but haven't discovered yet

Form encoding

You have urlEncodedParser.

A form submission (see the first part of this answer) will, by default, use URL encoding.

Axios will use JSON encoding. You'll need to change the middleware when you get your Axios request to replace the form submission request.

innerText

You are, presumably, reading the data from input elements.

They don't have innerText, they have values.

response object

.then(function (problem) {
            if (problem.toString() === "username") {

The resolve value of the promise will be a response object.

You need to access its data property. If you stringify the response you'll get "[Object object]" which won't match "username".

redirecting

res.redirect("/");

A redirect means "What you asked for can be found here".

It does not mean "The browser viewport should navigate to this URL".

That will cause the browser to request / (which I'm assuming is your homepage, an HTML document) and supply it to your JavaScript. It won't display it.