Почему я получаю ошибку 400 неверный запрос при отправке формы, в которую я добавил входные данные?

Предыстория: у меня есть веб-приложение на основе узла/экспресса, которое в основном представляет собой сайт рейтинга/базы данных для кемпингов. Вы можете просмотреть текущую рабочую версию здесь: https://radiant-eyrie-76078.herokuapp.com и github здесь: https://github.com/HashSlingSlash/YelpCamp. Я только что завершил попытку добавить профили пользователей, обновив форму регистрации, включив в нее дополнительную информацию и добавив страницу показа для каждого пользователя. Теперь всякий раз, когда я нажимаю кнопку регистрации (или отправляю почтовый запрос в /register с помощью почтальона), я получаю ошибку 400 Bad Request. Если я затем перейду на домашнюю страницу, я смогу войти в систему как пользователь, которого я пытался зарегистрировать, поэтому пользователь регистрируется, несмотря на ошибку неверного запроса. Я пытался очистить кеш и историю посещенных страниц, а также использовать другие браузеры, но это все равно не сработает. Я даже пытался удалить все изменения, внесенные в форму, чтобы снова сделать ее просто именем пользователя и паролем, но это все равно не сработало. Я пытался исправить это и отлаживать часами, и я не могу понять, что может произойти.

Вот моя страница регистрации:

<%- include("./partials/header") %>
 
<div class="row">
    <h1 class="login-header">Sign Up</h1>
    <div class="login-form">
        <form action="/register" method="POST">
            <div class="form-group">
                <label for="username">Username</label>
                <input class="form-control" type="text" name="newUser[username]" placeholder="username" id="username">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input class="form-control" type="password" name="password" placeholder="password" id="password">
            </div>
            <div class="form-group">
                <label for="firstName">First Name</label>
                <input class="form-control" type="text" name="newUser[firstName]" placeholder="First Name" id="firstName">
            </div>
            <div class="form-group">
                <label for="lastName">Last Name</label>
                <input class="form-control" type="text" name="newUser[lastName]" placeholder="Last Name" id="lastName">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input class="form-control" type="email" name="newUser[email]" placeholder="[email protected]" id="email">
            </div>
            <div class="form-group">
                <label for="avatar">Avatar</label>
                <input class="form-control" type="text" name="newUser[avatar]" placeholder="avatar url" id="avatar">
            </div>
            <div class="form-group">
                <label for="admin">Admin Key (Enter admin key here if you've been given one)</label>
                <input class="form-control" type="text" name="adminKey" placeholder="********" id="admin">
            </div>
            <div class="form-group">
                <button class="btn btn-lg btn-primary btn-block">Sign Up!</button>
            </div>
        </form>
        <a href="/campgrounds">Go Back</a>
    </div>
</div>
 
<%- include("./partials/footer") %>

Вот мои индексные маршруты:

const express = require("express");
const router = express.Router();
const passport = require("passport");
const User = require("../models/user");
const Campground = require("../models/campground");
 
//root route
router.get("/", (req, res) =>{
    res.render("landing");
});
 
//show register form
router.get("/register", (req, res) =>{
    res.render("register", {page: "register"});
});
 
//handle sign up logic
router.post("/register", (req, res) =>{
    const newUser = new User(req.body.newUser);
    if(req.body.adminKey === "secret"){
        newUser.isAdmin = true;
    }
    User.register(newUser, req.body.password, (err, user) =>{
        if(err){
            return res.render("register", {"error": err.message});
        }
        passport.authenticate("local")(req, res, () =>{
            req.flash("success", "Welcome to YelpCamp " + user.username);
            res.redirect("/campgrounds");
        });
    });
});
 
//login form
router.get("/login", (req, res) =>{
    res.render("login", {page: "login"});
});
 
//login logic
router.post("/login", 
passport.authenticate("local", 
{
    failureRedirect: "/login",
    failureFlash: true
}), (req, res) =>{
    req.flash("success", "Welcome back " + req.user.username);
    res.redirect("/campgrounds");
});
 
//logout
router.get("/logout", (req, res) =>{
    req.logOut();
    req.flash("success", "Logged you out!");
    res.redirect("/campgrounds");
});
 
//user profile
router.get("/user/:id", (req, res) =>{
    User.findById(req.params.id, (err, foundUser) =>{
        if(err){
            req.flash("error", "Something went wrong");
            return res.redirect("back");
        }
        Campground.find().where("author.id").equals(foundUser._id).exec((err, campgrounds) =>{
            if(err){
                req.flash("error", "Something went wrong");
                return res.redirect("back");
            }
            res.render("users/show", {user: foundUser, campgrounds: campgrounds});  
        });
    });
});
 
 
module.exports = router;

Вот моя пользовательская схема:

const mongoose = require("mongoose");
const passportLocalMongoose = require("passport-local-mongoose");

const UserSchema = new mongoose.Schema({
    username: String,
    password: String,
    firstName: String,
    lastName: String,
    email: String,
    avatar: String,
    isAdmin: {type: Boolean, default: false}
});

UserSchema.plugin(passportLocalMongoose);

module.exports = mongoose.model("User", UserSchema);

Я пытался исправить это часами и был бы признателен за любую помощь!


person HashSlingSlash    schedule 24.06.2020    source источник
comment
Можете ли вы показать свой маршрут регистрации?   -  person Ravi Shankar Bharti    schedule 24.06.2020
comment
@RaviShankarBharti Это блок кода в логике регистрации дескриптора. Тот, который начинается с router.post(/register   -  person HashSlingSlash    schedule 25.06.2020
comment
Можете ли вы показать свой метод User.register в схеме?   -  person Ravi Shankar Bharti    schedule 25.06.2020
comment
@RaviShankarBharti Я отредактировал вопрос, включив в него схему пользователя. Этот метод исходит из паспорта местного мангуста.   -  person HashSlingSlash    schedule 25.06.2020


Ответы (1)


Я наконец понял проблему. Мне пришлось изменить атрибут имени во входных данных формы только на имя пользователя, пароль, адрес электронной почты и т. д. Я считаю, что локальный мангуст паспорта ожидает получить данные в соответствии с этими парами ключ-значение, хотя я не уверен в точной причине, почему это необходимо, так как я в любом случае даю данные как объект. Если кто-то хочет это увидеть, вот мой обновленный и рабочий код:

Форма регистрации:

<%- include("./partials/header") %>

<div class="row">
    <h1 class="login-header">Sign Up</h1>
    <div class="login-form">
        <form action="/register" method="POST">
            <div class="form-group">
                <label for="username">Username</label>
                <input class="form-control" type="text" name="username" placeholder="username" id="username">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input class="form-control" type="password" name="password" placeholder="password" id="password">
            </div>
            <div class="form-group">
                <label for="firstName">First Name</label>
                <input class="form-control" type="text" name="firstName" placeholder="First Name" id="firstName">
            </div>
            <div class="form-group">
                <label for="lastName">Last Name</label>
                <input class="form-control" type="text" name="lastName" placeholder="Last Name" id="lastName">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input class="form-control" type="email" name="email" placeholder="[email protected]" id="email">
            </div>
            <div class="form-group">
                <label for="avatar">Avatar</label>
                <input class="form-control" type="text" name="avatar" placeholder="avatar url" id="avatar">
            </div>
            <div class="form-group">
                <label for="admin">Admin Key (Enter admin key here if you've been given one)</label>
                <input class="form-control" type="text" name="adminKey" placeholder="********" id="admin">
            </div>
            <div class="form-group">
                <button class="btn btn-lg btn-primary btn-block">Sign Up!</button>
            </div>
        </form>
        <a href="/campgrounds">Go Back</a>
    </div>
</div>

<%- include("./partials/footer") %>

Маршрут:

//handle sign up logic
router.post("/register", (req, res) =>{
    const newUser = new User({
        username: req.body.username,
        firstName: req.body.firstName,
        lastName: req.body.lastName,
        email: req.body.email,
        avatar: req.body.avatar
    });
    if(req.body.adminKey === "secret"){
        newUser.isAdmin = true;
    }
    User.register(newUser, req.body.password, (err, user) =>{
        if(err){
            return res.render("register", {"error": err.message});
        }
        passport.authenticate("local")(req, res, () =>{
            req.flash("success", "Welcome to YelpCamp " + user.username);
            res.redirect("/campgrounds");
        });
    });
});
person HashSlingSlash    schedule 25.06.2020