Javascript POST:REACT应用程序上的400个错误请求-使用Express

我正在学习React，我也是一个新的表达者，所以我非常感谢你的帮助！因此，我目前仍在处理POST请求，状态为400=我已经能够将数据存储在JSON对象中，并获得正确的信息显示在客户端。然而，我正试图提出一个POST请求，更新标题和描述，并将我的新视频添加到前端的列表中。这是我的密码

REACT组件/AXIOS请求

import React from 'react';
import upload from '../../assets/Images/Upload-video-preview.jpg';
import axios from 'axios';
import './Upload.scss';

class Upload extends React.Component {
   state = {
    title: '',
    description: ''
}

handleChange = event => {
    this.setState({title: event.target.value, description: event.target.value});
}

submitHandler = (event) => {
    console.log('FORM', event.target.title.value, event.target.description.value);
    event.preventDefault();
    axios.post('http://localhost:8080/videos/')
    .then(results => {
        console.log(results);
    })
 
}

render() {
    return(
        <section className="upload">
            <h1 className="upload-header">Upload Video </h1>
            <div className="upload-div">   
                <div className="upload-div__inner">
                    <h3 className="upload-div__inner--h3">Video Thumbnail</h3>
                    <img src={upload}  className="upload-div__inner--img"/>
                </div>
            <form className="upload-form" onSubmit={this.submitHandler}>
               <div className="upload-form--div">
                    <label className="upload-form--div-label">TITLE YOUR VIDEO</label>
                        <input type="text" name="title" className="upload-form--div-input" />
                    <label className="upload-form--div-label">ADD A VIDEO DESCRIPTION</label>
                    <input type="text" name="description" className="upload-form--div-input" />
                </div> 
                <button type="submit" className="comment__form--outer-button" >Cancel</button>
                <button type="submit" className="comment__form--outer-button" >Publish</button>
            </form>
            </div>
        </section>
    )

    }
}

我的对象位于一个名为videoId.json的文件中，下面是它的一个片段：

    [
{
    "id": "1af0jruup5gu",
    "title": "BMX Rampage: 2018 Highlights",
    "channel": "Red Cow",
    "image": "https://i.imgur.com/l2Xfgpl.jpg",
    "description": "On a gusty day in Southern Utah, a group of 25 daring mountain bikers             lew the doors off what is possible on two wheels, unleashing some of the biggest moments the sport has ever seen. While mother nature only allowed for one full run before the conditions made it impossible to ride, that was all that was needed for event veteran Kyle Strait, who won the event for the second time -- eight years after his first Red Cow Rampage title",
"views": "1,001,023",
"likes": "110,985",
"duration": "4:01",
"video": "https://project-2-api.herokuapp.com/stream",
"timestamp": 1545162149000,
"comments": [
    {
        "name": "Micheal Lyons",
        "comment": "They BLEW the ROOF off at their last show, once everyone started figuring out they were going. This is still simply the greatest opening of acconcert I have EVER witnessed.",
        "id": "1ab6d9f6-da38-456e-9b09-ab0acd9ce818",
        "likes": 0,
        "timestamp": 1545162149000
    },
    {
        "name": "Gary Wong",
        "comment": "Every time I see him shred I feel so motivated to get off my couch and hop on my board. He’s so talented! I wish I can ride like him one day so I can really enjoy myself!",
        "id": "cc6f173d-9e9d-4501-918d-bc11f15a8e14",
        "likes": 0,
        "timestamp": 1544595784046
    },
    {
        "name": "Theodore Duncan",
        "comment": "How can someone be so good!!! You can tell he lives for this and loves to do it every day. Everytime I see him I feel instantly happy! He’s definitely my favorite ever!",
        "id": "993f950f-df99-48e7-bd1e-d95003cc98f1",
        "likes": 0,
        "timestamp": 1542262984046
    }
]

}

---

]

我觉得我想得太多了，我简化了我的代码-现在我只需要找出下一步，并传递我的值，以便在我发布请求后显示它们

  router.post('/', (req, res) => {
if(req.body) {
  videoList.push(req.body);
  res.status(201).json({
      success: true
  })
  } else {
     res.status(400).json({
          success: false,
          error: "Please provide a valid title!"
      })
  }

  })

---

我觉得我想得太多了，我简化了我的代码-现在我只需要找出下一步，并传递我的值，以便在我发布请求后显示它们

  router.post('/', (req, res) => {
if(req.body) {
  videoList.push(req.body);
  res.status(201).json({
      success: true
  })
  } else {
     res.status(400).json({
          success: false,
          error: "Please provide a valid title!"
      })
  }

  })

---

检查您的浏览器控制台和网络，您很可能会看到与

CORS

相关的问题。类似于

“阻止跨源请求：同源策略不允许读取$somesite上的远程资源”

。这是因为您试图访问相同的资源，您可以通过在express应用程序中添加cors头/中间件配置来修复它。检查您的浏览器控制台和网络，您很可能会看到与

CORS

相关的问题。类似于

“阻止跨源请求：同源策略不允许读取$somesite上的远程资源”

。这是因为您试图访问相同的资源，您可以通过在express应用程序中添加cors头/中间件配置来修复它。