Блог

Я, используя ReactJS, создаю форму для пользовательского ключа в деталях. Я также использую NodeJS для обработки данных post из React. Но NodeJS, похоже, не перехватил данные.

Это обработка события react

 handleSave(e){
        let caseData=this.state.caseInfo
        let url = 'http://localhost:8080'
        console.log(caseData)
            fetch(url,{
                method:"POST",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                  },
                data: JSON.stringify({caseInfo: caseData}),
            })

          }
  

Это NodeJS

 var http = require('http');
var url = require('url');
var bodyParser = require('body-parser')
var express = require('express')
var app = express()
http.createServer(function(req,res){

    app.use(bodyParser.urlencoded({extended:false}))
    app.use(bodyParser.json())
    app.use(function (req, res){
        res.setHeader('Content-Type', 'text/plain')
        res.write('you posted:n')
        res.end(JSON.stringify(req.body, null, 2))
        console.log(JSON.stringify(req.body));
    })

}).listen(8080);
  

Я ожидаю, что данные из React могут быть отправлены с помощью метода post на узел и отобразить данные в журнале консоли. Однако в консоли сервера это ничего не отображает.

Похоже, вы не используете express стандартным способом. Я бы изменил это, чтобы оно было больше похоже на следующее…

 app.use(bodyParser.json());

app.post('/', (req, res) => {
  res.json({ posted: req.body });
  console.log(JSON.stringify(req.body));
});

app.listen(8080);
  

И, вероятно, просто полностью избавиться от вызова http.createServer .

—

Ознакомьтесь с документами для получения дополнительных примеров маршрутизации: https://expressjs.com/en/starter/basic-routing.html

Например, если вы обслуживаете свое приложение react с другого сервера localhost:3000 (как используется create react app), и вы пытаетесь выполнить вызовы api к серверу на localhost:8080 , вы получите ошибки CORS, потому что браузер видит их как два разных домена. Чтобы начать, вы можете посмотреть документы здесь:https://expressjs.com/en/resources/middleware/cors.html

Но вам, вероятно, придется npm install cors указать, где находится ваш сервер, и использовать что-то вроде следующего:

 var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())
app.use(bodyParser.json());

app.post('/', (req, res) => {
  res.json({ posted: req.body });
  console.log(JSON.stringify(req.body));
});

app.listen(8080);