我有一个注册页面,用户需要确认他们的密码。为此,我创建了以下axios和服务器端代码来处理请求。
tl;dr使用这里,这里和这里找到的建议方法,我发送一个axios
请求,其格式为:
axios({
method: 'get',
url: '/my/server/endpoint',
data: *json data*
});
在我的nodejs(express)服务器上,我侦听req.body
(建议在这里,这里,这里,这里)内容或req.data
(建议在这里,这里)。
问题:
简单地说,req.body
是一个空对象,req.data
是未定义的(见下图)。
我有以下快速app
安装程序
const app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(helmet());
app.use(express.urlencoded({extended: false}));
app.use(cookieParser());
app.use('/assets', express.static(path.join(__dirname, '/assets')));
app.use(cors());
app.use(session({secret: config.secret, resave: false, saveUninitialized: false}));
app.use(passport.initialize({}));
app.use(passport.session({secret: config.secret}));
app.use(function(req,res,next){
res.locals.session = req.session;
next();
});
app.use(flash());
我可以确认通过AXIOS
请求发送的数据实际上是有效的。
我做错什么了吗?
客户端代码
$('#btnSetVaultPassword').click(function () {
$('#btnSetVaultPassword').prop("disabled", true);
let password = $('#edtVaultPassword');
let passwordConfirm = $('#edtVaultPasswordConfirm');
// const data = ;
axios({
method: 'get',
url: '/setup/setup-vault',
data: {
password: password.val(),
passwordConfirm: passwordConfirm.val()
}
}).then((result) => {
if(result.status === true) {
// set success alert with message
let alertMessage = document.createElement("div");
alertMessage.classList.add("alert", "alert-success");
alert.val(result.message);
$('.container-fluid').prepend(alertMessage);
// hide modal
$('#dialogVault').modal({show: false});
} else {
// show message on modal
$('#vaultMessage').val(result.message);
// enable setVaultPassword button
$('#btnSetVaultPassword').prop("disabled", false);
}
});
});
对应的NodeJS(Express)服务器端代码
router.get('/setup-vault',
async function (req, res, next) {
let pass = req.body.password;
let confirmPass = req.body.passwordConfirm;
if(pass === undefined || pass === "" ||
confirmPass === undefined || confirmPass === "") {
res.json({status: false, message: "Password(s) cannot be empty"});
}
if(pass !== confirmPass) {
res.json({status: false, message: "Keys don't match"});
} else {
const vaultHash = vault.encrypt(pass, Buffer.from(settingName.vaultSecret));
await createOrSaveSetting(settingName.vaultSecret, vaultHash);
// test connection
res.json({status: true, message: "Vault created"});
}
});
我认为您必须使用POST方法来获取body部分中的数据,如果您正在使用get,就像它现在在您的代码中一样,您只能通过URL查询字符串获取参数,您必须使用POST这样做,您的代码才能工作:
客户端
$('#btnSetVaultPassword').click(function () {
$('#btnSetVaultPassword').prop("disabled", true);
let password = $('#edtVaultPassword');
let passwordConfirm = $('#edtVaultPasswordConfirm');
// const data = ;
axios({
method: 'post',
url: '/setup/setup-vault',
data: {
password: password.val(),
passwordConfirm: passwordConfirm.val()
}
}).then((result) => {
if(result.status === true) {
// set success alert with message
let alertMessage = document.createElement("div");
alertMessage.classList.add("alert", "alert-success");
alert.val(result.message);
$('.container-fluid').prepend(alertMessage);
// hide modal
$('#dialogVault').modal({show: false});
} else {
// show message on modal
$('#vaultMessage').val(result.message);
// enable setVaultPassword button
$('#btnSetVaultPassword').prop("disabled", false);
}
});
});
和服务器端:
router.post('/setup-vault',
async function (req, res, next) {
let pass = req.body.password;
let confirmPass = req.body.passwordConfirm;
if(pass === undefined || pass === "" ||
confirmPass === undefined || confirmPass === "") {
res.json({status: false, message: "Password(s) cannot be empty"});
}
if(pass !== confirmPass) {
res.json({status: false, message: "Keys don't match"});
} else {
const vaultHash = vault.encrypt(pass, Buffer.from(settingName.vaultSecret));
await createOrSaveSetting(settingName.vaultSecret, vaultHash);
// test connection
res.json({status: true, message: "Vault created"});
}
});
如果您打算使用GET方法,您应该在服务器端使用查询字符串选项,并将客户端更改为在Axios请求中使用参数代替数据。