Question

我初学者使用React Js和Node Js，我遇到了问题，我无法将数据从React Js发布到Node Js，我一直在寻找方法但是都失败了，我不知道为什么。

这是我的完整代码。

这是我的反应文件＆＃39; member.js＆＃39;，在端口3000（http://localhost:3000/member）上运行。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Member extends Component {
  constructor() {
    super();
    this.state = { player: {} };
  }

  handleSubmit(e) {
    e.preventDefault();
    fetch('http://localhost:4000/player', {
        mode: 'no-cors',
        method: 'post',
        headers: {
            "Content-Type": "text/plain"
        },
        body: JSON.stringify({
          number: 123,
          name: "John",
          position: "Andrew"
        })
    }).then(function(response) {
      console.log(response);
    }).catch(function(error) {
      console.log('Request failed', error)
    });    
  }

  render() {
    return (
      <div className="member-page">
        <form>
          <input type="submit" onClick={this.handleSubmit.bind(this)} />
        </form>
      </div>
    )
  }
}
export default Member;

这是我的节点文件＆＃39; player.js＆＃39;，在端口4000（http://localhost:4000/player）上运行。

var http = require('http');
var mysql = require('mysql');
var express = require('express');
var app = express(); 

var connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "react_1"
});

app.post('/player', function(req, res, next) {

    res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      next();

  var player = req.body;
  var query = connection.query('INSERT INTO player VALUES ?', player, function(err, result) {
    // Neat!
  });
  res.end('Success');
});

app.listen(4000, function() {
  console.log('Example app listening on port 4000!');
});

我不知道我在哪里犯了错误，请任何人更正我的代码member.js或player.js。

非常感谢您的帮助。

Answer 1

我同意@robertklep。我认为问题出在 var player = req.body;

尝试：

安装正文解析器 npm包

npm i -S body-parser

配置正文解析器

   var http = require('http');
   var mysql = require('mysql');
   var express = require('express');
   var bodyParser = require('body-parser');
   var app = express(); 

   app.use(bodyParser.json()); // for parsing application/json
   app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

   //enable CORS
   app.use(function(req, res, next) {
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
     next();
  });

  var connection = mysql.createConnection({
       host: "localhost",
       user: "root",
       password: "",
       database: "react_1"
  });

  app.post('/player', (req, res) => {
       var player = req.body;
       var query = connection.query('INSERT INTO player VALUES ?', player, (error, results, fields) => {
          if (error) throw error;
          // Neat!
       });
      res.send('Success');
    });

  app.listen(4000, function() {
     console.log('Example app listening on port 4000!');
   });

Answer 2

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

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(5000, () => {
  console.log('Example app listening on port 5000!')
})

app.use('/', router);

尝试像这样配置节点服务器

Answer 3

首先使用

安装body-parser：

npm install body-parser

const bodyParser = require('body-parser');

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

如果您要传递字符串数据，请使用

app.use(bodyParser.text());

否则，如果您以Json身份传递数据，则使用

app.use(bodyParser.Json());

它应该适合您的情况。

无法将数据从React Js发布到Node js

3 个答案: