簡単なログイン/サインアップを行うのに多少の困難がありましたが、フェッチサインアップとログインの両方のalert()で応答が表示されます: [オブジェクト応答]。 console.log(JSON.stringify(res.json())); を試みました。しかし、これはコンソールに何も表示されませんでした。ご協力をよろしくお願いいたします。
const express = require("express");
const router = express.Router();
const db = require("../../mongo").db();
const validate = require("../../validation");
const { password } = require("../../validation");
router.post("/register", (req, res) => {
res.json({success: true})
console.log(JSON.stringify(req.body));
let { username, password } = req.body;
let err = validate.username(username);
if (err) throw err;
err = validate.password(password);
if (err) throw err;
db.collection("users").find({ username: username }),
function (err, username) {
if (err) {
throw err;
}
if (username) {
console.log(username);
console.log("Username in use!");
} else {
console.log("Not in use!");
db.collection("users").insertOne({
username: username.value,
password: password.value,
});
}
};
});
router.post("/login", (req, res) => {
console.log(JSON.stringify(req.body));
let { username, email, password } = req.body;
db.collection("users").find({ username: username, password: password }),
function (err, results) {
if (err) {
res.status(500).json({errorMsg: err.message}) ;
}
if (results.length > 0) {
res.json({"Login successful": username, password});
} else {
res.status(401).json({errorMsg: "Incorrect username and/or password"});
}
};
});
module.exports = router;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebServer</title>
<script>
function register() {
let data = {
username: document.querySelector("#user").value,
password: document.querySelector("#pass").value,
}
fetch("/api/register", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
}).then((res) => {
console.log(JSON.stringify(res.json()));
alert("response: " + res)
}).catch((err) => {
throw(err)
});
}
function login() {
let data = {
username: document.querySelector("#userlogin").value,
password: document.querySelector("#passlogin").value,
}
fetch("/api/login", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
}).then((res) => {
console.log(res.json());
alert("response: " + res)
}).catch((err) => {
throw(err)
});
}
</script>
</head>
<body>
<h1>Register:</h1>
<input autocomplete="username" id = "user" placeholder="username">
<input autocomplete="current-password" id = "pass" type = "password "placeholder="password">
<button onclick="register()">Register</button>
<br>
<br>
<br>
<br>
<input autocomplete="username" id = "userlogin" placeholder="username">
<input autocomplete="current-password" id = "passlogin" type = "password" placeholder="password">
<button onclick="login()">Login</button>
</body>
</html>
暗黙的な toString() を使用してオブジェクトを文字列化すると、その型だけが表示され、内容は表示されません。
– JavaScript2020 年 9 月 3 日 12:03
res はオブジェクトであり、アラートは暗黙的に toString() メソッドを呼び出します。そのため、アラートには「[オブジェクトの応答]」と表示されます。
res.json() は非同期です (ドキュメント)。したがって、応答本文を使用したい場合は、何らかの方法で res.json() または res.json().then(data => ...) を待つ必要があります。
あなたの場合、これは次のようになります。
fetch("/api/login", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
}).then((res) => {
return res.json();
}).then((data) => {
console.log(JSON.stringify(data));
}).catch((err) => {
throw(err)
});