【问题标题】:Cannot post data from react to nodejs using fetch无法使用 fetch 将数据从 react 发布到 nodejs
【发布时间】:2020-08-31 14:12:03
【问题描述】:

我正在使用 fetch 将数据从反应端发布到 nodejs(两者都在我的本地主机中运行)所以我正在做的是

let formData = new FormData();
    formData.append("agent_name", this.state.agentName);
    formData.append("agent_email", this.state.agentEmail);
    formData.append("agent_phone", this.state.agentPhone);
    formData.append("agent_id", this.state.agentID);
    formData.append("agent_password", this.state.agentPassword);
    formData.append("state", this.state.selectedState);
    formData.append("city", this.state.selectedCity);
    formData.append("file", this.state.file);
    formData.append("imageurl", this.state.imageUrl);
   fetch("http://localhost:4000/add_delivery_agent", {
      method: "POST",
      body: formData,
    })
      .then((response) => response.json())
      .then((responsejson) => {
        console.log(responsejson);
      });

然后在服务器端我做了

exports.addDeliveryAgent = async (req, res, next) => {
  let data = req.body;
  console.log(data);
  }
};

但是 console.log(data) 总是给我空对象,我在这里做错了什么?

数据也是通过 axios 发布的,但我希望通过 fetch 获得!

App.js 配置是

const express = require("express");
const bodyparser = require("body-parser");
const app = express();
const mongoconnect = require("./utils/database").mongoconnect;
const path = require("path");
var cors = require("cors");

// const adminUserRoute = require("./routes/admin/user/user.js");
const adminDeliveryAgentRoute = require("./routes/admin/deliveryAgent/deliveryAgent");
const user = require("./routes/admin/user/user.js");

app.use(express.urlencoded());
app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());
app.use(cors());
app.use("/tfd/controlcenter/", express.static(path.join(__dirname, "/build")));

// app.use(adminUserRoute);
app.use(adminDeliveryAgentRoute);
app.use(user);

mongoconnect(() => {
  app.listen(4000, () => {
    console.log("running 4000");
  });
});

【问题讨论】:

  • 你是否在开始解析表单数据时包含app.use(express.urlencoded())It sounds like this.
  • @ObsoleteAwareProduce 是的,伙计!!
  • This might work。我认为您需要 multerformidable nodejs 模块来解析 FormData。
  • 您是否在后端代码中应用了 cors 设置?
  • @VivekSingh 是的

标签: javascript node.js express


【解决方案1】:

尝试添加Content-Type 标头

   fetch("http://localhost:4000/add_delivery_agent", {
      method: "POST",
      body: formData,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        // or
        // 'Content-Type': multipart/form-data
      },
    })

【讨论】:

    【解决方案2】:

    不要使用表单数据,而是使用普通对象,因为 bodyparser 不支持表单数据使用的 multipart/form-data

    formData={}
    
    formData.agent_name=this.state.agentName;
    formData.agent_email=this.state.agentEmail;
    //..
    formData.imageurl=this.state.imageUrl;
    
    fetch("http://localhost:4000/add_delivery_agent", {
      method: "POST",
      body: formData,
    })
      .then((response) => response.json())
      .then((responsejson) => {
        console.log(responsejson);
      });
    

    【讨论】:

    • 我也想上传一个文件,所以我们可以用普通对象发送一个文件吗?
    • 看起来你正在发送一个图像 url 或者你是一个文件对象?无论如何,这里最大可能的文件大小是多少?
    • 我在这里发送一个文件对象,这里的大小没有限制,我发送的图像只有 70kb
    • 我明白了,那么普通对象在这里不会有用尝试使用像mutler 这样的bodyparser 来代替
    猜你喜欢
    • 2018-11-24
    • 1970-01-01
    • 2019-04-25
    • 1970-01-01
    • 2018-12-18
    • 1970-01-01
    • 1970-01-01
    • 2019-01-29
    相关资源
    最近更新 更多