req.body是空的，我无法弄清楚为什么

Question

我是表达和节点的新手，我正在尝试向我的服务器发布一个axios帖子，但是当我在节点中的console.log时，req.body将变空。 谁知道我做错了什么？ 我是控制台记录并发送给邮递员。

这是server.js

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



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

app.get('/', (req, res) => {

  res.send('hello')
})

const port = 4444;

app.post('/send', (req, res) => {
      console.log('body: ', req.body)
      res.status(200).send(req.body)
});



app.listen(port, () => {
  console.log('We are live on port 4444');
});

我的axios电话

export default class Form extends Component {
     constructor(props) {
         super(props) 
         this.state = {
            name: 'kaleb',
            message: '',
            email: '',
            number: '',
            sent: false
         }




     }

     handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })

     }

     handleSubmit = () => {
         axios.post("/send", {name: this.state.name}).then(() => {
             console.log(this.state.name)
         })


     }

Answer 1

在server.js中试试这个：

    app.use(bodyParser.json());
    app.use(bodyParser.json({type: 'application/*+json'}));
    app.use(bodyParser.urlencoded({extended: false}));//or true whatever you need

axios电话：

    axios({method:'post',url:'/send',data:{name:this.state.name}})
      .then(console.log(this.state.name));

Answer 2

尝试将url作为http://localhost:4444/send到你的axios调用中：

 handleSubmit = () => {
         axios.post("http://localhost:4444/send", {name: this.state.name}).then(() => {
             console.log(this.state.name)
         })

Answer 3

好的，这是我在阅读完所有上述评论后的想法。

1. 你说，当你通过邮递员发送请求时，它是console.log一个空的req.body。 所以你的网址没问题。 它正在改正路由器。 邮差有3种内容类型。 只需选择“X-www-form-urlencoded”并再次发送请求即可。 它应该工作。
2. 在你的组件中，你说在提交后没有任何事情发生。 最有可能的问题应该是你的网址。 您的后端服务器在端口4444上运行并且通常会在PORT 3000上运行应用程序。因此，当您调用axios.post（'/ send'）时，它实际上发送到localhost:3000/server而不是localhost:4444/server 。 现在它不会起作用。 您需要设置代理以避免此问题。 这是https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development的方式。 或者您可以使用axios.post('http://localhost:4444/server')

注意： 如果您使用axios.post('http://localhost:4444/server') ，您将面临cors问题。 使用它来消除该问题https://www.npmjs.com/package/cors

Answer 4

这通常是通过将urlencoded扩展名设置为true引起的，请尝试以下操作：

app.use(bodyParser.urlencoded({ extended: false }))