问题1

Question

我正在尝试将React与节点集成在一起，因此在从React端向节点发送数据时，我总是无法定义，请看下面的代码（get request可以正常工作！）

反面

export default class customers extends Component {

postcustomer(){
   customers=[{id:1,name:'xws'},{id:2,name:'sfg'}]
fetch('/form', {
method: 'post',
data: JSON.stringify(customers)
}).then(res=>res.json()).then(res=>console.log(res))
}
  componentDidMount() {
   this.postcustomer()
  }

  render() {
    return (
      <div>  
      </div>
    );
  }
}

然后在节点服务器中

const express=require('express')
const app=express()
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
})); 

app.post('/form',(req,res)=>{
    res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    console.log(req.body.data)
})
app.listen(5000)

所以只要我运行nodemon server.js req.body.data给了我未定义的

Answer 1

问题1

您使用的是fetch，而不是jQuery。请求正文的内容放在名为body而不是data

的属性中

问题2

您忘了指定Content-Type，因此提取将默认声称它正在发送纯文本。

const customers=[{id:1,name:'xws'},{id:2,name:'sfg'}];
fetch('/form', {
    method: 'post',
    body: JSON.stringify(customers),
    headers: {
        "Content-Type": "application/json"
    }
})
  .then(res=>res.json())
  .then(res=>console.log(res))

放在一边。不要使用隐式全局变量。用const，let（或者也许是var）声明变量。

问题3

console.log(req.body.data)

您的JSON的任何地方都没有data属性。顶层对象是一个数组。

console.log(req.body)

将数据从React传递到节点服务器

1 个答案:

问题1

问题2

问题3