NodeJS 节点未收到React Post

edqdpe6u  于 2023-05-06  发布在  Node.js
关注(0)|答案(1)|浏览(180)

我一直试图弄清楚如何用我的Node express服务器从我的react应用程序接收POST请求,并且两者成功连接(如下图所示,当POST从前端发送时)。然而,正如也可以看到的那样,帖子的正文根本没有被阅读,我真的不明白为什么。谁能帮我解释一下发生了什么事?我真的很感激!
下面是我的MyForm.js文件:

import React from 'react'

class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: '' };
    }

    handleChange = (event) => {
        this.setState({[event.target.name]: event.target.value});
    }

    handleSubmit = (event) => {
        alert('A form was submitted: ' + JSON.stringify(this.state));
        fetch('http://localhost:6969/Communication', {
          method: 'POST',
          body: "five nights at freddys"
        }).then(res => {
          console.log(res);
        });

        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} name="name" onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

export default MyForm;

下面是我的react App.js文件:

import React from "react";
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import MyForm from './MyForm'

function App() {
  return (
    <div className = "App">
      <MyForm />
    </div>
  );
}

export default App;

下面是我的Node onlineStoreServer.js:

const express = require('express');

const onlineStoreServer = express();
onlineStoreServer.use(express.json());

onlineStoreServer.post("/Communication", async(req, res) => {
  console.log("Post received!");
  console.log(req.body);
})

onlineStoreServer.listen(6969, () => {
  console.log("Listening on port 6969 B)");
});

我试过在post请求中切换数据,也试过在node函数中乱转,但似乎什么都不起作用。我希望body是输入到React应用程序中的名称。

z6psavjg

z6psavjg1#

看这里你的前端

class MyForm extends React.Component {
 constructor(props) {
  super(props);
  this.state = { name: '' };
   }
    handleChange = (event) => {
  this.setState({[event.target.name]: event.target.value});
 }

 handleSubmit = (event) => {
 // alert('A form was submitted: ' + JSON.stringify(this.state));

  fetch('http://localhost:5500/Communication', {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },  
  method: 'POST',
    body: JSON.stringify({
     
       name: this.state.name,
      
       }),
  }).then(res => res.json())
  .then(res => console.log(res));

  event.preventDefault();
  }

  render() {
     return (
      <form onSubmit={this.handleSubmit}>
          <label>
              Name:
                <input type="text" value={this.state.value} name="name" onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
         </form>
    );
}

}
您后端

const express = require('express');
const cors = require('cors');
const fs = require('fs');
const path = require('path');
const app = express();

const port = 5500;

app.use(cors()); // enable CORS

app.use(express.json());
app.use(express.urlencoded({ extended: true }));


app.post('/Communication', (req, res) =>{
  console.log(req.body);

  res.json('okey');
 }); 

 app.listen(port, () => console.log(`Example app listening on port ${port}!`));

相关问题