在使用獲取 API 的 POST 請求時獲取空 object

Question

我是 express/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>

/public/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 時，我得到了以下 output。

I got request!
{}

但在瀏覽器控制台中，正在顯示Object { latitude: 27.6430848, longitude: 84.115456 } 。 這意味着pos不為空 object。 那么為什么它在服務器端顯示為空的 object 。 先感謝您。

Answer 1

您必須對傳遞給fetch的body參數的 object 進行stringify （在這種情況下，在您的/public/main.js文件中）：

const options = {
  method: "POST",
  header: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(pos),
};

Answer 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>

在使用獲取 API 的 POST 請求時獲取空 object

問題描述

2 個解決方案

解決方案1
1 2021-05-12 11:59:04

解決方案2
0 2021-05-12 12:00:06

在使用獲取 API 的 POST 請求時獲取空 object

問題描述

2 個解決方案

解決方案1 1 2021-05-12 11:59:04

解決方案2 0 2021-05-12 12:00:06

解決方案1
1 2021-05-12 11:59:04

解決方案2
0 2021-05-12 12:00:06