Экспресс не будет перенаправлять после паспортной аутентификации

Question

Я запускаю сервер на порту 5000 с помощью Express, и я использовал create-реагировать на приложение, чтобы запустить сервер на порту 3000. Для управления аутентификацией, passport.js.

Я использую http-proxy-middleware для прокси некоторых конечных точек на экспресс-сервере.Вот мой код:

setupProxy.js

module.exports = function(app) {
    app.use(
        proxy("/signup", {
            target: "http://localhost:5000",
            changeOrigin: true
        })
    );
}

passport.js

passport.use(
"local-signup",
new LocalStrategy(
    {
        passReqToCallback: true
    },
    async (req, username, password, done) => {
        const existingUser = await User.findOne({
            username: username
        });
        if (existingUser) {
            console.log("User already exists");
            done(null, false);
        } else {
            const user = new User();
            user.username = username;
            user.password = password;
            user.save();
            console.log(user);
            done(null, user);
        }
    }
)

);

App.js

app.post(
    "/signup",
    passport.authenticate("local-signup", {
        successRedirect: "/",
        failureRedirect: "/",
        failureFlash: true
    })
);

Component.js

// some code here

onSubmit(event) {
    event.preventDefault();
    axios
        .post(
            "/signup",
            {
                username: this.state.username,
                password: this.state.password
            },
        )

Если я сделаю запрос к http://localhost:3000/signup, используяпочтальон, он просто работает (мне выдают «пользователь уже существует» или создается новая запись в базе данных, и я печатаю информацию о пользователе).Но если я использую форму в Component.js с функцией onSubmit, упомянутой выше, я ничего не получу.Я не перенаправлен, пользователь не создан.

На вкладке сети консоли отображается http://localhost:3000/signup с кодом 302 found (что имеет смысл), а затем я получаю http://localhost:3000 с кодом 304 not modified.

ЯЯ просто не могу найти ответы на переполнение стека.Я занимался этим уже несколько дней, совершенно застрявший ... Кто-нибудь может дать мне подсказку о том, что происходит?

РЕДАКТИРОВАТЬ: Благодаря доброй помощи, ребята, я рефакторингкод.Кажется, я куда-то добираюсь, но теперь я получаю 400 Bad Request.Вот мой обновленный код:

App.js

app.post(
    "/signup",
    passport.authenticate("local-signup"),
    (req, res, next) => {
        if (req.user) {
            var redir = { redirect: "/" };
            return res.json(redir);
        } else if (!req.user) {
            var redir = { redirect: "/profile" };
            return res.json(redir);
        }
    }
);

Component.js

onSubmit(event) {
    event.preventDefault();
    axios
        .post("/signup", {
            username: this.state.username,
            password: this.state.password
        })
        .then(function(response) {
            if (response.data.redirect == "/") {
                console.log("Success");
                window.location = "/";
            } else if (response.data.redirect == "/profile") {
                console.log("Failed");
                window.location = "/profile";
            }
        })
        .catch(function(error) {
            console.log("Error");
            window.location = "/profile";
        });
}

Я получаю печатьиз "Ошибка", и если я распечатываю ошибку, я просто получаю 400 Bad Request ...

Answer 1

Кажется, я решил свою проблему!Спасибо большое, ребята!Ты лучший ... Наконец-то я вышел из этого застрявшего места.

Я следовал этому замечательному учебнику, и я просто использовал форму html вместо метода post axios.Это просто сработало:)

Вот мой новый (рабочий) код:

App.js

app.post(
    "/signup",
    passport.authenticate("local-signup", {
        successRedirect: "/", // redirect to the secure profile section
        failureRedirect: "/profile", // redirect back to the signup page if there is an error
        failureFlash: true // allow flash messages
    })
);

Component.js

const Profile = () => {
return (
    <div>
        <h1>Signup</h1>
        <form action="/signup" method="post">
            <div>
                <label>Username</label>
                <input
                    type="text"
                    className="form-control"
                    name="username"
                />
            </div>
            <div>
                <label>Password</label>
                <input
                    type="text"
                    className="form-control"
                    name="password"
                />
            </div>
            <button type="submit" value="Submit">
                Signup
            </button>
        </form>
    </div>
);

};