Question

我使用ReactJs在详细信息中为用户密钥构建表单。我还使用NodeJ来处理来自React的发布数据。但是NodeJ似乎没有捕获数据。

这是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方法发送到Node并在控制台日志中显示数据。但是，在服务器的控制台中，它什么也不显示。

Answer 1

似乎您没有以标准方式使用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

Answer 2

如果您要从其他服务器（例如localhost:3000（由create react app使用）提供服务，而您正在尝试对localhost:8080上的服务器进行api调用来获得CORS错误，因为浏览器将它们视为两个不同的域。首先，您可以在此处查看文档：{{3}}

但是您可能必须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);

NodeJ无法从ReactJs表单捕获数据发布

2 个答案: