【问题标题】:Why am I getting a 400 bad request error when submitting a form that I added inputs to?为什么我在提交添加了输入的表单时收到 400 bad request 错误?
【发布时间】:2020-10-15 04:14:09
【问题描述】:

背景:我有一个基于节点/express 的 Web 应用程序,它基本上是露营地的评级/数据库站点。您可以在此处查看当前工作版本: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@mail.com" 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);

我已尝试修复此问题几个小时,如果有任何帮助,我将不胜感激!

【问题讨论】:

  • 你能显示你的注册路线吗?
  • @RaviShankarBharti 是“handle signup logic”下的代码块 以router.post("/register"开头的那个
  • 你能在架构中显示你的 User.register 方法吗?
  • @RaviShankarBharti 我已经编辑了问题以包含用户模式。该方法来自护照本地猫鼬。

标签: node.js express routes http-status-code-400 bad-request


【解决方案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@mail.com" 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");
        });
    });
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-09-19
    • 2021-11-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-11
    相关资源
    最近更新 更多