我正在通过登录进行chrome扩展,所以我试图将数据从弹出窗口发送到数据库。我目前只是将其发送到服务器,并在控制台中打印获得的值,但是这些值不会到达或保持未定义状态。我是节点和服务器的新手,所以我可能只是出现了一个虚拟错误。这些是我认为问题所在的文件:
[popup.html:它具有2个输入框和一个发送按钮
<!DOCTYPE html>
<html>
<head>
<!--link rel="stylesheet" href="CSS/toggle_bar.css"-->
<meta charset="UTF-8" http-equiv="Content-Security-Policy"/>
<!--script src="message.js"></script-->
</head>
<body>
<h2 align="center">
CTRL
</h2>
User: <input type="text" id="User" placeholder="User"><br>
Password: <input type="text" placeholder="Password" id="Password" ><br>
<button type="submit" id='boton'>ENVIAR</button>
<script src="popup.js"></script>
<!--script src="background.js"></script-->
</body>
</html>
server.js:
let express = require('express');
let path = require("path");
let app = express();
app.use(express.json());
app.use(express.static(path.join(__dirname, '/')));
app.post('/CTRL', function(req, res) {
let usuario = req.body;
console.log('Nombre: ' + usuario.name + ' password: ' + usuario.passw);
res.send('Nombre: ' + usuario.name + ' password: ' + usuario.passw);
});
app.listen('8000', function() {
console.log('server corriendo puerto 8000');
})
和popup.js:
let nombre = document.getElementById('User');
let contrasena = document.getElementById('Password');
let boton = document.getElementById('boton');
boton.addEventListener('click', sendData);
function sendData(){
let nombreSTR = nombre.value
let contrasenaSTR = contrasena.value
let usuario = {
name: nombreSTR,
passw: contrasenaSTR
}
fetch('http://localhost:8000/CTRL', {
mode:'no-cors',
method: 'POST',
body: JSON.stringify(usuario),
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
});
}
这是我在控制台中得到的:
server corriendo puerto 8000
密码:未定义密码:未定义
您的问题在以下代码行中:
let usuario = req.body
必须是:
let usuario = req.body.usuario
或:
let { usuario } = req.body
在popup.js中,由于您使用的是无心跳,因此Content-Type不起作用。在此处使用以下代码-
fetch('http://localhost:8000/CTRL', {
method: 'POST',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify(usuario),
});
但是您必须在server.js中允许CORS。另外,您必须使用express bodyparser正确解析正文。使用以下代码-
let express = require('express');
let path = require("path");
var bodyParser = require('body-parser')
var cors = require('cors');
let app = express();
app.use(express.static(path.join(__dirname, '/')));
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.use(cors());
app.options('*', cors());
app.post('/CTRL', function(req, res) {
let usuario = req.body;
console.log('Nombre: ' + usuario.name + ' password: ' + usuario.passw);
res.send('Nombre: ' + usuario.name + ' password: ' + usuario.passw);
});
app.listen('8000', function() {
console.log('server corriendo puerto 8000');
})