使用 fetch API 在 POST 请求时获取空对象-解网

问：

我是快递/Node.js事物的新手。我尝试发布包含当前用户位置（使用地理位置 api 的经度和纬度）的请求。

/public/index.html

<!DOCTYPE >
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hey</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <button id="submit" class="click-btn">Submit my Location</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

/公共/main.js

//navigating the user's current location using geolocation web api
const pos = {};
if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(
    (location) => {
      pos.latitude = location.coords.latitude;
      pos.longitude = location.coords.longitude;
    },
    (err) => console.log(err.message)
  );
} else {
  console.log("oops");
}

// handling submit location to send
// latitude, longitude to the server we created
const submit_button = document.getElementById("submit");

submit_button.addEventListener("click", (e) => {
  e.preventDefault();
  const options = {
    method: "POST",
    header: {
      "Content-Type": "application/json",
    },
    body: pos,
  };
  console.log(pos);
  fetch("/api", options);
});

/index.js

const { json } = require("express");
const express = require("express");
const app = express();

app.listen(3000, () => console.log("listeninig...."));
app.use(express.static("public"));
app.use(express.json({ limit: "1mb" }));

app.post("/api", (request, response) => {
  console.log("I got request!");
  console.log(request.body);
});

上面index.js是服务器代码。当我在终端中运行index.js时，我得到了以下输出。

I got request!
{}

但是在浏览器控制台中，正在显示。这意味着不是空对象。那么为什么它在服务器端显示空对象。先谢谢你。Object { latitude: 27.6430848, longitude: 84.115456 }pos

javascript node.js express 服务器端 fetch-api

@esqew 将 pos 更改为仍然给我空对象。控制台日志来自服务器的响应，就像向我显示错误说如何解决这个问题？JSON.stringify(pos)fetch("/api", options) .then((res) => console.log(res)).catch((err) => console.log(err.message));Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

0赞 Prathamesh More 5/12/2021 #2

在将正文发送到服务器之前，将您的正文转换为字符串

//navigating the user's current location using geolocation web api
const pos = {};
if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(
    (location) => {
      pos.latitude = location.coords.latitude;
      pos.longitude = location.coords.longitude;
    },
    (err) => console.log(err.message)
  );
} else {
  console.log("oops");
}

// handling submit location to send
// latitude, longitude to the server we created
const submit_button = document.getElementById("submit");

submit_button.addEventListener("click", (e) => {
  e.preventDefault();
  const options = {
    method: "POST",
    header: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(pos),
  };
  fetch("http://localhost:3000/api", options).then(res => {
    console.log(res)
  });
});

<!DOCTYPE >
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hey</title>
</head>

<body>
  <h1>Welcome</h1>
  <button id="submit" class="click-btn">Submit my Location</button>
  </div>
  <script src="main.js"></script>
</body>

</html>

使用 fetch API 在 POST 请求时获取空对象

Getting empty object while POST request using fetch API

评论

评论

评论