NodeJS 节点未收到React Post

edqdpe6u 于 2023-05-06 发布在 Node.js

关注(0)|答案(1)|浏览(181)

我一直试图弄清楚如何用我的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应用程序中的名称。

node.js

来源：https://stackoverflow.com/questions/76175109/node-not-receiving-react-post

1条答案

按热度按时间

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}!`));

赞(0）回复(0）举报 2023-05-06

我来回答

NodeJS 节点未收到React Post

1条答案

相关问题

热门标签

最新问答