将 req.body 从 React 发送到 Express，然后发布到 api答案

【问题标题】：sending req.body from React to Express then post to api将 req.body 从 React 发送到 Express，然后发布到 api
【发布时间】：2023-03-30 20:12:02
【问题描述】：

我正在尝试将表单正文从 React 发送到 Express，然后将其发布到 API。一切似乎都可以将正文从 React 转换为 Express，但我不确定如何将其发布到 API。 GET 请求可以从 API 正常工作，它只是将数据 POST 回 API 我遇到问题。我也在使用 AXIOS。任何建议或教程链接表示赞赏。

SiteAdd.js - 从状态获取表单数据并从 Express 服务器获取路由。

       handleSubmit = e => {
    e.preventDefault();
    //deconstruct
    const { id, siteRef, addrType, addr1, addr2, city, county, postCode, country } = this.state;
    const site = {
      id,
      siteRef,
      addrType,
      addr1,
      addr2,
      city,
      county,
      postCode,
      country
    };

   fetch('/api/siteAdd', site)
      .then(() => console.log('Site Created'))
      .catch(err => {
        console.error(err);
      });
  };

server.js - Express 服务器

       var express = require('express')
    var http = require('http')
    //var bodyParser = require('body-parser')
    var cors = require('cors')
    const path = require('path')
    var app = express()
    var axios = require('axios')

    app.use(express.urlencoded({ extended: false }));
    app.use(express.json());
    app.use(cors())

    //get
    //working
    app.get('/api/site', (req, res, next) => {
        axios.get('https://****/api/site/')
        .then(response => res.json(response.data))
            .catch(err => next(err));
    })

let sites = [];
app.post('/api/siteAdd', function (req, res) {
    const newSite = {
        id: req.body.id,
        siteRef: req.body.siteRef,
        addrType: req.body.addrType,
        addr1: req.body.addr1,
        addr2: req.body.addr2,
        city: req.body.city,
        county: req.body.county,
        postCode: req.body.postCode,
        country: req.body.country,
    };

    sites.push(newSite);
    console.log(sites);
});

【问题讨论】：

您可以通过使用以下选项启动服务器来获取有关服务器代码问题的更多详细信息：i--inspect-brk more info here。我建议你在 axios.post 之前设置一个断点并尝试从控制台运行代码，也许 req.body 有问题
我已经更新了我的 app.post 代码，它现在可以工作了，我在控制台日志中得到了 req.body 查询，这很好。我现在如何将其发布到 api？与我包含的 GET 请求相同，但 POST 代替？
您的客户似乎没有发出正确的发布请求。 [这里[(developer.mozilla.org/en-US/docs/Web/API/Fetch_API/…) 是 fetch 的 post 请求示例。
Also' 而不是在服务器上使用 axios 并在客户端上 fetch 为什么不在服务器和客户端上都使用 fetch 。服务器可以使用this fetch。
感谢您的回复。我有点困惑，是否需要向 api 发出 post 请求。我认为这是从服务器完成的。 sites.push(newSite) 似乎什么都不做，因为当我在邮递员中检查 api 时它不存在。

标签： reactjs api express post axios

【解决方案1】：

尝试检查后端返回状态代码500 的错误日志。您尝试发布数据的服务器出现问题。

【讨论】：

我更新的代码现在可以工作了，因为 console.log 显示了来自客户端的所有 req.body 数据。 sites.push(newSite) 似乎没有做任何事情。我将如何将其发布到 api？