POST 400 Неправильный запрос, React, Node / Express, MongoDB - PullRequest
Новая
       6

POST 400 Неправильный запрос, React, Node / Express, MongoDB

0 голосов
/ 01 марта 2019

Я учусь создавать простое приложение MERN для сбора пользовательских данных и загрузки их в коллекцию mongoDB, и я не могу понять, почему я получаю ошибку 400 BAD REQUEST при попытке опубликовать пользователяданные.В настоящее время он работает на локальном сервере.В настоящее время я не могу найти сообщение, которое напрямую решает мою конкретную проблему.

Вот мои data.js для схемы данных: 

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const data = new Schema(
    {
        x: Number,
        y: Number,
        z: Number,
        r: Number,
        g: Number,
        b: Number
    },
    { collection: "cube" }
);

module.exports = mongoose.model("data", DataSchema);

Мой серверный файл server.js: 

// JavaScript source code
const mongoose = require("mongoose");
const express = require("express");
const bodyParser = require("body-parser");
const logger = require("morgan");
const Data = require("./data");
const cors = require("cors");

const API_PORT = 3000;
const app = express();
const router = express.Router();

//MongoDB database
const dbRoute = "mongodb+srv://testuser:testuserpw@alexcluster-alfjn.mongodb.net/test?retryWrites=true";

mongoose.connect(
    dbRoute,  
    { useNewUrlParser:true }
);

let db = mongoose.connection;

db.once("open", () => console.log("Connected to database"));

db.on("error", console.error.bind(console, "MongoDB connection error:"));

// bodyParser, parses the request body to be a readable json format
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(logger("dev"));

//this is our add method
//add method to add data into database
router.post ("/putData", (req, res) => {
    let data = new Data(req.body);

    data.save()
    .then(data => {
        res.json('Values added successfully');
    })
    .catch(err => {
        res.status(400).send("unable to save to database");
    });
});

app.use("/api", router);
app.use(express.json());

app.listen(API_PORT, () => console.log('Listening on port ${API_PORT}'));

И, наконец, мой интерфейс App.js: 

import React, { Component } from "react";
import axios from "axios";

class App extends Component {
    state = {
        x: 0,
        y: 0,
        z: 0,
        r: 0,
        g: 0,
        b: 0
    };

    addData = (xVal, yVal, zVal, rVal, gVal, bVal) => {
        axios.post("http://localhost:3000/api/putData", {
            x: xVal,
            y: yVal,
            z: zVal,
            r: rVal,
            g: gVal,
            b: bVal
        })
        .then(response => { 
            console.log(response)
        })
        .catch(error => {
            console.log(error.response)
        });
// reset state
        // this.setState({
        //     x: 0,
        //     y: 0,
        //     z: 0,
        //     r: 0,
        //     g: 0,
        //     b: 0
        // })

    };

//UI
    render(){
        return (
            <div>  
                <ul>
                    <p> Please enter all applicables values for x, y, z, and r, g, b. </p>
                </ul>
                <div>
                    <label> X </label>
                    <input type="number" min="0" max="360" onChange={e => this.setState({x: e.target.value})} placeholder="0" style={{width:"40px"}} />
                    <label> Y </label>
                    <input type="number" min="0" max="360" onChange={e => this.setState({y: e.target.value})} placeholder="0" style={{width:"40px"}} />
                    <label> Z </label>
                    <input type="number" min="0" max="360" onChange={e => this.setState({z: e.target.value})} placeholder="0" style={{width:"40px"}} />
                    <label> R </label>
                    <input type="number" min="0" max="255" onChange={e => this.setState({r: e.target.value})} placeholder="0" style={{width:"40px"}} />
                    <label> G </label>
                    <input type="number" min="0" max="255" onChange={e => this.setState({g: e.target.value})} placeholder="0" style={{width:"40px"}} />
                    <label> B </label>
                    <input type="number" min="0" max="255" onChange={e => this.setState({b: e.target.value})} placeholder="0" style={{width:"40px"}} />
                    <button onClick={() => this.addData(this.state.x, this.state.y, this.state.z, this.state.r, this.state.g, this.state.b)}>
                    Add
                    </button>
                </div>
            </div>
        );
    }
}

export default App;

В соответствии с консолью в Google Chrome, здесь я получаю сообщение об ошибке:

![Полное сообщение об ошибке

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

EDIT1: отредактировано с сообщением об ошибке.

1 Ответ

0 голосов
/ 01 марта 2019

Существуют две основные проблемы, препятствующие работе вашего кода:

Вы неправильно экспортируете свою схему из data.js:

Измените свой module.exports с 

module.exports = mongoose.model("data", DataSchema);

до 

module.exports = mongoose.model("data", data);

Здесь вы ссылаетесь на схему как на данные const data = new Schema(...).

Также вы получаете ошибку CORS, потому что вы не использовали ее вваш server.js.Вам нужно добавить: 

app.use(cors());
app.options('*', cors());

В ваш файл server.js выше: 

// bodyParser, parses the request body to be a readable json format
app.use(bodyParser.urlencoded({ extended: false }));

Это заставило его работать на моем локальном хосте.Однако я настоятельно рекомендую не использовать эту настройку в производственной среде.Проверьте модуль CORS для дополнительных параметров настройки:

https://www.npmjs.com/package/cors

...