JavaScript/Nodejs: ajax POST-запрос, не передающий объект на бэкэнд

Question

Я пытаюсь отправить объект JSON на свой сервер, но когда я консольный журнал req.body, он показывает пустой объект. Вот мой код:

var submitRecipe =() => { 

    let recipe = {alias: null, description: null, instructions: null}; 
    recipe.alias = document.getElementById('alias').value; 
    recipe.description = document.getElementById('description').value; 
    recipe.instruction = document.getElementById('instructions').value; 

    postRequest("/createrecipe", recipe, (xhr) => { 
     console.log("Hello!" + JSON.parse(xhr.responseText)); 
    }) 
}; 
var postRequest = (url, data, callback = undefined) => { 

    xhr.onreadystatechange =() => { 
     //Call a function when the state changes. 
     if(xhr.readyState == 4 && xhr.status == 200) { 
      console.log("testing"); 
      return callback(200 , xhr.responseText); 
     }else{ 
      return callback(400, xhr.responseText); 
     } 
    } 
    xhr.open('POST', url) 
    xhr.send(data); 
} 

Узел

createRecipe = function(req, res){ 

    console.log(req.body); 
} 

Я использую экспресс для передачи информации о сервере, и я использую bodyParser.json(). Оттуда, я просто называю контроллер со следующим:

выразить

var express = require("express"); 
var bodyParser = require("body-parser"); 

var server = express(); 

var recipeController = require("./controllers/recipeController"); 

server.use(bodyParser.json()); 
server.use(bodyParser.urlencoded({ extended: true})); 


server.post("/createrecipe", recipeController.createRecipe); 

createRecipe функции только консоль регистрирует информацию, но, как было сказано выше, req.body является пустым объектом. Все советы приветствуются.

Answer 1

XHR ожидает, что ваши данные будут закодированы или упакованы любым способом, который вы ожидаете от его отправки, в отличие от других оберток библиотек, таких как функции обертки jQuery или Angular Ajax. Также, body-parser промежуточное ПО не идентифицировало Content-type и не активировалось для требуемого запроса.

Просто JSON.stringify ваши данные JSON

data = JSON.stringify(data); 

и добавить тип MIME application/json как content-type заголовка xhr «s.

xhr.setRequestHeader("content-type", "application/json"); 

Кроме того, если вы хотите использовать url-encoded сделать кодирование данных перед установкой и добавить соответствующий тип содержимого заголовка.

Мой полный код теста (для справочных целей):

Сервер (testServer.js):

var express = require("express"); 
var bodyParser = require("body-parser"); 

var server = express(); 

server.use(bodyParser.json()); 
server.use(bodyParser.urlencoded({ extended: true})); 

server.post("/createrecipe", function(req, res){ 
    console.log(req.body); 
    var resp = {server: "hello world", dataReceived: req.body}; 
    res.json(resp); 
}); 

server.get("/", function(req, res){ 
    res.sendFile(__dirname + "/testClient.html"); 
}) 

server.listen(3000, function(){ 
    console.log("Server running"); 
}) 

Client (testClient.html):

<input type="text" id="alias" value="a"> 
<input type="text" id="description" value="b"> 
<input type="text" id="instructions" value="c"> 
<button onclick="submitRecipe()"> TEST</button> 
<script> 
var submitRecipe =() => { 

    let recipe = {alias: null, description: null, instructions: null}; 
    recipe.alias = document.getElementById('alias').value; 
    recipe.description = document.getElementById('description').value; 
    recipe.instructions = document.getElementById('instructions').value; 

    postRequest("/createrecipe", recipe, (status, xhr) => { 
     var data = (JSON.parse(xhr.responseText)); 
     console.log(data.dataReceived); 
    }) 
}; 
var postRequest = (url, dataObj, callback = undefined) => { 
    //--------------Added line-------------------- 
    var data = JSON.stringify(dataObj); 
    //--------------Added line-------------------- 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange =() => { 
     //Call a function when the state changes. 
     if(xhr.readyState == 4 && xhr.status == 200) { 
      return callback(200 , xhr); 
     }else if(xhr.status == 400){ 
      return callback(400, xhr); 
     } 
    } 
    xhr.open('POST', url) 
    //--------------Added line-------------------- 
    xhr.setRequestHeader("content-type", "application/json"); 
    //--------------Added line-------------------- 
    xhr.send(data); 


} 
</script>