reactjs - API 未返回正确的 JSON (react/express/axios)

Question

我觉得这应该是重复的...如果是，我找不到正确的线程。

我在带有 React 前端的服务器上有一个 Express API(使用 mongoose)。 API 应向客户端返回 JSON。

问题:它可以与 Postman 配合使用，但在 React 中返回错误的 JSON

我在 Postman 中发送的内容(这会生成正确的响应):

{"fileHashValue"
:
"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"}

服务器代码:

app.get("/userData", function(req, res) {
  const fileHashValue = req.body.fileHashValue;
  UserData = UserData.findOne(
    {
      fileHashValue
    },
    function(err, userdata) {
      res.json({
        userdata
      });
    }
  );
});

客户端代码:

componentDidMount() {
  axios
    .get(
      "http://ec2-52-53-190-3.us-west-1.compute.amazonaws.com:3000/userData",
      {
        fileHashValue:
          "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
      }
    )
    .then(res => {
      console.log(res.data);
    });
}

看起来这应该一切正常，但它的响应就像我发送了一个空白请求一样。 IE，如果我在 Postman 中发送空白请求，它会给出与在 React 中登录的相同结果。感谢任何帮助，谢谢!

Answer 1

函数 axios.get() 期望请求配置作为第二个参数(不是您的原始参数)。

您可以按如下方式设置参数:

axios.get("http://ec2-52-53-190-3.us-west-1.compute.amazonaws.com:3000/userData", {
    params: {
        fileHashValue: "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
    }
})
.then(res => {
        console.log(res.data);
});

更详细的解释:https://flaviocopes.com/axios/#get-requests

---

正如其他答案提到的，使用 get 动词可能不符合您的需求。 Get 主要用于获取资源，并且不能包含主体。使用 post 可以防止这种情况。 Post 主要用于创建资源并且可以有正文:

axios.post("http://ec2-52-53-190-3.us-west-1.compute.amazonaws.com:3000/userData", {
    params: {
        fileHashValue: "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
    }
})
.then(res => {
        console.log(res.data);
});

如果您的目标确实是简单地获取一个元素，我建议更改您的路由架构以包含您尝试在 url 中获取的 id :

axios.get("http://ec2-52-53-190-3.us-west-1.compute.amazonaws.com:3000/userData/e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855", {})
.then(res => {
        console.log(res.data);
});

并调整您的后端:

app.get("/userData/:id", function(req, res)

然后可以在 req.params.id 中访问该 ID