Почтальон может отправить запрос POST, но не мой код внешнего интерфейса

Я пытался зарегистрировать пользователя через свой ванильный интерфейс на JavaScript, но не смог отправить запрос POST, который не возвращает код состояния 400. С другой стороны, с Postman запросы POST работают нормально, и пользователь успешно зарегистрирован.

Вот что регистрируется, когда я делаю запрос POST:

HTML:

 <body>
    <form id = "signup-form">
        <h1>Sign up Form</h1>
        <table>
            <tr>
                <td id = "yo">User email: </td>
                <td><input type = "email" name = "email" placeholder = "email" /></td>
            </tr>
            <tr>
                <td>Username: </td>
                <td><input type = "text" name = "username" placeholder = "username"/></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type = "password" name = "password" placeholder = "password" /></td>
            </tr>
            <tr>
                <td>Confirm Password:</td>
                <td><input type = "password" name = "password2" placeholder = "password" /></td>
            </tr>
            <tr>
                <td><input type = "submit" value = "signup";/></td>
            </tr>
        </table>
    </form>
    <p>Already have an account? <a href = "index.html "> Login </a></p>
    <script src = "signup.js"></script>
</body>

Здесь мне нужна помощь в том, почему он возвращает ответ 400. Интерфейсный JavaScript:

 const form = document.getElementById('signup-form'); 
     form.onsubmit = function(e) {
        e.preventDefault();


      const email = form.email.value; 
        const username = form.username.value;
        const password = form.password.value;
        const password2 = form.password2.value; 

        const user = {
            email,
            username,
            password,
            password2,   
        }
          fetch('http://localhost:4002/api/user/register', {
              method: 'POST',
              body: JSON.stringify(user),
              headers:{
              'Content-Type': 'application/json'
              }
          }).then(res => {
             console.info(res); 
          })
          .catch(error => console.error('Error:', error));
         form.reset();
       }

Внутренний код, если необходим:

Маршрут

   //Register user
router.post('/register', (req, res, next) => {

      const { errors, isValid } = validateRegisterInput(req.body);
    //Check validation
    if (!isValid) {
        return res
            .status(400)
            .json(errors);
    }

    models.User.findOne({ 
        where: {
        email: req.body.email
        } 
    })
        .then(user => {
            if (user) {
                errors.email = 'Email already exists';
                errors.username = 'Username already exists';
                return res
                    .status(400)
                    .json(errors)
            } else {

                const data = {
                        email: req.body.email,

                        password: req.body.password,

                        username: req.body.username,
                };

                //Encrypting password
                bcrypt.genSalt(10, (err, salt) => {
                    bcrypt.hash(data.password, salt, (err, hash) => {
                        if (err)
                            throw err;
                        data.password = hash;
                        models.User.create(data).then(function(newUser, created) {

                            if (!newUser) {

                                return next(null, false);

                            }

                            if (newUser) {

                                return next(null, newUser);

                            }

                        })
                            .then( user => {
                                res.json(user)
                            })
                            .catch((err) => {
                                console.info(err);
                        })
                    })
                })
            }
        })
});

Модель

    "use strict";
module.exports = function(sequelize, DataTypes){
    var User = sequelize.define('User', {
        id: {
            allowNull: false,
            autoIncrement: true,
            primaryKey: true,
            type: DataTypes.INTEGER,

        },
        username: {
            type: DataTypes.STRING, 
            validate: {
                len: [2, 20],
                msg: 'Username must be between 2 and 20 characters'
            }
        },
        email: DataTypes.STRING,
        password: {
            type: DataTypes.STRING,
            validate: {
                len: {
                   args: [5],
                   msg: 'Password must be atleast 5 characters'
                }
            }
        }
    });
    User.associate = function(models) {
      //associations can be defined here

    }
   return User; 
};

Проверка

const Validator = require('validator');
const isEmpty = require('./is-empty');

module.exports = function validatorRegisterInput(data) {
    let errors = {};

        data.username = !isEmpty(data.username)
        ? data.username
        : '';

    data.email = !isEmpty(data.email)
        ? data.email
        : '';
    data.password = !isEmpty(data.password)
        ? data.password
        : '';
    data.password2 = !isEmpty(data.password2)
        ? data.password2
        : '';


    if (Validator.isEmpty(data.email)) {
        errors.email = 'Email field is required';
    }

    if (!Validator.isEmail(data.email)) {
        errors.email = 'Email field is required';
    }

    if (Validator.isEmpty(data.password)) {
        errors.password = 'Password is required';
    }

    if (!Validator.isLength(data.password, {
        min: 5
    })) {
        errors.password = 'Password must be atleast 5 characters';
    }

    return {errors, isValid: isEmpty(errors)}
}

Какой ответ вы на самом деле получаете?

— 02.01.2019 15:12

body: JSON.stringify(user)

— 02.01.2019 15:13

Я добавил ответ, что получаю в OP.

— 02.01.2019 16:40

Здесь была бы очень полезна отладка. Установите точку останова в функции конечной точки регистра, чтобы отследить, откуда исходит 400 Bad Request.

— 03.01.2019 01:31

javascript mysql fetch-api

02.01.2019 15:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

884

Ответы 1

Попробуйте изменить тип содержимого на application / json в вызове выборки. Отправка формы отправит всю страницу обратно на сервер, и в этом случае тип контента, который у вас есть, будет работать, но вы выполняете вызов выборки и предотвращаете поведение по умолчанию.

 fetch('http://localhost:4002/api/user/register', {
              method: 'POST', // or 'PUT'
              body: JSON.stringify(user), // data can be `string` or {object}!
              headers:{
              'Content-Type': 'application/json'
              }
          }).then(res => {
             document.getElementById("yo").style.color = "red"; 
             console.info(res); 
          })
          .catch(error => console.error('Error:', error));

02.01.2019 15:56

Другие вопросы по теме

Исключить связанные записи - вина по ассоциации

Выберите повторяющиеся платежные заказы, ожидающие оплаты, без соответствующего оплаченного заказа

MYSQL LEFT JOIN не показывает все данные

Каким должен быть тип столбца «Дата истечения срока», если в некоторых случаях он не имеет никакого значения? (пусто? null? 0000-00-00?)

Как сохранить изображение в базе данных с помощью laravel, а затем отобразить его

Как выбрать имя элемента из jList в netbeans?

Проблемы производительности с контейнером докеров mysql

Как вставить данные в две разные таблицы с помощью PHP и MYSQL

Необходимо настроить запрос mysql

Как сделать так, чтобы ссылка 'index.php? X' отображала x-раздел на странице

Почтальон может отправить запрос POST, но не мой код внешнего интерфейса

Ответы 1

Другие вопросы по теме

Похожие вопросы