Javascript Postman post请求有效,但ajax post无效。反复检查客户端js
第一个关于stackoverflow的问题我需要答案吗。我的问题是,我有一个端点来创建一个项目,当我用Postman发送一个POST请求时,它就起作用了。我正在使用node和express:Javascript Postman post请求有效,但ajax post无效。反复检查客户端js,javascript,node.js,ajax,express,client-side,Javascript,Node.js,Ajax,Express,Client Side,第一个关于stackoverflow的问题我需要答案吗。我的问题是,我有一个端点来创建一个项目,当我用Postman发送一个POST请求时,它就起作用了。我正在使用node和express: router.post("/", jwtAuth, (req, res) => { console.log(req.body); const requiredFields = ["date", "time", "task", "notes"]; requiredFields.forEach
router.post("/", jwtAuth, (req, res) => {
console.log(req.body);
const requiredFields = ["date", "time", "task", "notes"];
requiredFields.forEach(field => {
if (!(field in req.body)) {
const message = `Missing \`${field}\` in request body`;
console.error(message);
return res.status(400).send(message);
}
});
Task.create({
userId: req.user.id,
date: req.body.date,
time: req.body.time,
task: req.body.task,
notes: req.body.notes
})
.then(task => res.status(201).json(task.serialize()))
.catch(err => {
console.error(err);
res.status(500).json({ message: "Internal server error" });
});
});
当我使用Postman发送,并且用正确的值记录req主体时,该端点工作
但是当我发送ajax请求时,我的服务器代码将req.body记录为一个空对象(“{}”)。因为Postman工作,我相信问题在于我的客户端javascript,但我就是找不到问题。我和其他人已经看了一百万遍,但就是找不到问题所在。以下是我的客户端javascript:
//User submits a new task after timer has run
function handleTaskSubmit() {
$(".submit-task").click(event => {
console.log("test");
const date = $(".new-task-date").text();
const taskTime = $(".new-task-time").text();
const task = $(".popup-title").text();
const notes = $("#task-notes").val();
$(".task-notes-form").submit(event => {
event.preventDefault();
postNewTask(date, taskTime, task, notes);
});
});
}
function postNewTask(date, taskTime, task, notes) {
const data = JSON.stringify({
date: date,
time: taskTime,
task: task,
notes: notes
});
//Here I log all the data. The data object and all its key are defined
console.log(data);
console.log(date);
console.log(taskTime);
console.log(task);
console.log(notes);
const token = localStorage.getItem("token");
const settings = {
url: "http://localhost:8080/tasks",
type: "POST",
dataType: "json",
data: data,
contentType: "application/json, charset=utf-8",
headers: {
Authorization: `Bearer ${token}`
},
success: function() {
console.log("Now we are cooking with gas");
},
error: function(err) {
console.log(err);
}
};
$.ajax(settings);
}
handleTaskSubmit();
我要做的是:
var httpClient = {
get: function( url, data, callback ) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
var readyState = xhr.readyState;
if (readyState == 4) {
callback(xhr);
}
};
var queryString = '';
if (typeof data === 'object') {
for (var propertyName in data) {
queryString += (queryString.length === 0 ? '' : '&') + propertyName + '=' + encodeURIComponent(data[propertyName]);
}
}
if (queryString.length !== 0) {
url += (url.indexOf('?') === -1 ? '?' : '&') + queryString;
}
xhr.open('GET', url, true);
xhr.withCredentials = true;
xhr.send(null);
},
post: function(url, data, callback ) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
var readyState = xhr.readyState;
if (readyState == 4) {
callback(xhr);
}
};
var queryString='';
if (typeof data === 'object') {
for (var propertyName in data) {
queryString += (queryString.length === 0 ? '' : '&') + propertyName + '=' + encodeURIComponent(data[propertyName]);
}
} else {
queryString=data
}
xhr.open('POST', url, true);
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(queryString);
}
};
用法和jquery一样简单:httpClient.post(Url,数据,(xhr)=>{})
var-bodyParser=require('body-parser');
app.use(bodyParser.json());//从html表单获取信息
app.use(bodyParser.urlencoded({extended:true}));//从html表单获取信息
干杯!:) 尝试删除
JSON.stringify
并直接传入数据对象。我以前尝试过,但没有成功:(您是否将浏览器控制台中的请求与邮递员请求进行了比较?是否有任何不同的标题或正文不同?它们都是相同的:正文完全相同,并且在标题中都有一个承载令牌如果它们确实相同,那么您的服务器应该也会看到它们相同。必须有一些不同之处这两个请求之间的差异。感谢Ivan向我展示了引擎盖下发生的一些事情!我尝试了您的解决方案;但是,我的请求正文仍然作为空对象记录:(