CreatePost.js 中的 fetch("/createpost", {...} ) 返回错误

Question

CreatePost.js 中的fetch("/createpost", {...} ) 返回以下错误：-

POST http://localhost:3000/createpost net::ERR_EMPTY_RESPONSE

postDetails @ CreatePost.js:30

onClick @ CreatePost.js:87

callCallback @ react-dom.development.js:188

invokeGuardedCallbackDev @ react-dom.development.js:237

invokeGuardedCallback @ react-dom.development.js:292

invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306

executeDispatch @ react-dom.development.js:389

executeDispatchesInOrder @ react-dom.development.js:414

executeDispatchesAndRelease @ react-dom.development.js:3278

executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287



forEachAccumulated @ react-dom.development.js:3259

runEventsInBatch @ react-dom.development.js:3304

runExtractedPluginEventsInBatch @ react-dom.development.js:3514

handleTopLevel @ react-dom.development.js:3558

batchedEventUpdates$1 @ react-dom.development.js:21871

batchedEventUpdates @ react-dom.development.js:795

dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568

attemptToDispatchEvent @ react-dom.development.js:4267

dispatchEvent @ react-dom.development.js:4189

unstable_runWithPriority @ scheduler.development.js:653

runWithPriority$1 @ react-dom.development.js:11039

discreteUpdates$1 @ react-dom.development.js:21887

discreteUpdates @ react-dom.development.js:806

dispatchDiscreteEvent @ react-dom.development.js:4168

CreatePost.js:53 TypeError: Failed to fetch 

我不知道我哪里做错了。以下文件是主要关注点：

CreatePost.js：

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom'
import M from 'materialize-css'


const CreatePost = () => {

    const history = useHistory()
    const [title, setTitle] = useState("")
    const [body, setBody] = useState("")
    const [image, setImage] = useState("")
    const [url, seturl] = useState("")

    const postDetails = () => {

        const data = new FormData()
        data.append("file", image)
        data.append("upload_preset", "insta-clone")
        data.append("cloud_name", "manindercloud")
        fetch("https://api.cloudinary.com/v1_1/manindercloud/image/upload", {
            method: "post",
            body: data
        }).then(res => res.json())
            .then(data => {
                seturl(data.url)
            }).catch(err => {
                console.log(err)
            })

            fetch("/createpost", {
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    title , 
                    body, 
                    pic : url
                })
            }).then(res => res.json())
                .then(data => {
                    
                    if (data.error) {
                        console.log(data.error)
                        M.toast({ html: data.error, classes: "#b71c1c red darken-4" })
                    }
                    else {
                        M.toast({ html:"Created post successfully!", classes: "#66bb6a green lighten-1" })
                        history.push("/")
    
                    }
                }).catch(err => {
                    console.log(err)
                })

    }

    return (
        <div className="card input-field" style={{
            margin: "30px auto",
            maxWidth: "500px",
            padding: "20px",
            textAlign: "center"

        }}>

            <input
                type="text"
                placeholder="title"
                value={title}
                onChange={(e) => setTitle(e.target.value)} />
            <input
                type="text"
                placeholder="body"
                value={body}
                onChange={(e) => setBody(e.target.value)} />
            <div className="file-field input-field">
                <div className="btn  #64b5f6 blue darker 1">
                    <span>Upload Image</span>
                    <input type="file" onChange={(e) => setImage(e.target.files[0])} />
                </div>
                <div className="file-path-wrapper">
                    <input className="file-path validate" type="text" placeholder="Upload one or more images" />
                </div>
            </div>
            <button className="btn waves-effect waves-light #64b5f6 blue darker 1"
                    onClick={()=>{postDetails()}}
            >
                Submit Post
            </button>
        </div>
    )
}

export default CreatePost

Post.js / 路由：

const express = require('express')
const router = express.Router()
const mongoose = require('mongoose')
const requireLogin = require('../middleware/requireLogin')
const User = mongoose.model("User")
const Post = mongoose.model("Post")

router.get('/allpost', (req, res) => {

    Post.find().populate("postedBy", "_id name").then(posts => {
        res.json({ posts })
    }).catch(err => {
        console.log(err)
    })
})

router.post('/createpost', requireLogin, (req, res) => {
    const { title, body , pic } = req.body
    if (!title || !body || !pic) {
        return res.status(422).json({ error: "please add all the fields!!" })
    }
    req.user.password = undefined
    const post = new Post({
        title, 
        body,
        pic , 
        postedBy: req.user
    })
    post.save().then(result => {
        res.json({ post: result })
    }).catch(err => {
        console.log(err)
    })
})

router.get('/mypost', requireLogin ,(req, res) => {
    const {_id} = req.user
    Post.find({postedBy : _id}).populate("postedBy", "_id name").then(mypost => {
        res.json({ mypost })
    }).catch(err => {
        console.log(err)
    })
})

module.exports = router

Post.js /models：

const mongoose = require('mongoose')
const User = mongoose.model("User")
const {ObjectId} = mongoose.Schema.Types
const postSchema = new mongoose.Schema({

    title:{
        type : String , 
        required : true
    } , 
    body:{
        type : String , 
        require : true
    } , 
    photo:{
        type :String , 
        require : true
    } , 
    postedBy:{
        type: ObjectId , 
        ref : "User"
    }
})

mongoose.model("Post" , postSchema)

Answer 1

您需要修改您的控制器以在出现故障时返回响应，如下所示：

router.get('/mypost', requireLogin ,(req, res) => {
    const {_id} = req.user
    Post.find({postedBy : _id}).populate("postedBy", "_id name").then(mypost => {
        res.json({ mypost })
    }).catch(err => {
        console.log(err);
        res.status(500).json({});
    })
})