将数据从 React 传递到 node express 服务器答案

【问题标题】：Pass Data from React to node express server将数据从 React 传递到 node express 服务器
【发布时间】：2019-09-30 23:42:04
【问题描述】：

我正在尝试将 generalDetail 数据从我的反应前端传递到我的节点服务器。我目前收到连接被拒绝错误。

（选项http://localhost:5000/api/homenet::ERR_CONNECTION_REFUSED）。

这是我的 onSubmitForm 函数：

  onSubmitForm(e){
  e.preventDefault();

  let data = {
            generalDetail: this.state.generalDetails,
            firstName: this.state.firstName,
            middleName: this.state.middleName,
            lastName: this.state.lastName
      };

      axios.post("http://localhost:5000/home", data).then(() => {

       }).catch(() => {
          console.log("Something went wrong. Plase try again later");
      });


}
  //end

  onContentChange(fieldname, data){

    console.log('On Content Change', data);

     this.setState({
       [fieldname]: data

    });
  }



}

这是我的 server.js 文件

const express = require('express');

const app = express();


// http://localhost:5000/api/home

app.post('/api/home', (req, res) => {
  const data = [
    {req.body.generalDetail},
  ];

  res.json(data);
});

const port = 5000;

app.listen(port, () => `Server running on port ${port}`);

【问题讨论】：

您将 api 路由声明为“/api/home”，但将数据发送到“/home”。您需要确保将数据发送到正确的路线。
如果你改变你的 .catch 来处理错误，你会看到你得到一个 404。尝试使用： .catch( (error) => { console.log(error); ));

标签： javascript node.js reactjs express ecmascript-6

【解决方案1】：

尝试在后端代码 (server.js) 中添加 cors 预检代码。

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  res.header("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS");
  res.header("Access-Control-Allow-Credentials", true);
  next();
});
app.post('/api/home', (req, res) => {
  const data = [{ generalDetails: req.body.generalDetail }];
  res.json(data);
});

【讨论】：

【解决方案2】：

试试这个

const express = require('express')
const app = express()
const port = 8000 //your port number

const cors = require('cors')
app.use(cors())
var bodyParser = require('body-parser')
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
}));

【讨论】：

您是否在控制台中看到“服务器在端口 ${port} 上运行”
不，我实际上没有哈哈
不，不是很不幸
你启动服务器了吗？ “节点 server.js”文件。你有什么错误吗？
它说 {req.body.generalDetail} 的语法无效，你会碰巧知道正确的语法吗？我正在尝试将数据从反应传递到后端。

【解决方案3】：

你可以把你的代码改成这个

例子

onSubmitForm = e => {
        e.preventDefault();
        let data = {
              generalDetail: this.state.generalDetails,
              firstName: this.state.firstName,
              middleName: this.state.middleName,
              lastName: this.state.lastName
        };

        axios.post("http://localhost:5000/api/home", data).then(() => {
           //do something
         }).catch(() => {
            console.log("Something went wrong. Plase try again later");
        });
    }

【讨论】：