React JsからNode jsにデータを投稿できません

Question

React JsとNode Jsを使用しているときに問題が発生し、React JsからNode Jsにデータを投稿できません。どうしてか分かりません。

これは私の完全なコードです。

これは私の反応ファイル 'member.js'で、ポート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; 

、これはポート4000（http://localhost:4000/player）上で実行し、私のノードのファイル 'player.js' です。私はミスを行う場所私にはわからない

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

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); 

は私が@robertklepに同意するあなたのノードサーバがこの

Answer 2

のように設定してください。私は問題があると思う。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!'); 
    });