Использование fetch для публикации данных JSON между источниками для экспресс-бэкенда - PullRequest
Новая
       11

Использование fetch для публикации данных JSON между источниками для экспресс-бэкенда

0 голосов
/ 14 сентября 2018

Я пытаюсь использовать Fetch для отправки некоторых данных JSON из формы и регистрации ответа от сервера Express, который должен быть простым ответом JSON, содержащим опубликованные значения формы, но я получаю только пустой объект вконсоль.

HTML и JavaScript могут быть выполнены из этой JSFiddle Link .

Как получить ответ заполненного объекта JSON отсервер?

HTML 

<form id="myForm">
    <input type="text" placeholder="Enter First Name" name="firstName" />
    <input type="text" placeholder="Enter Last Name" name="lastName" />
    <input type="submit" value="SUBMIT" />
</form>

JavaScript 

const form = document.getElementById("myForm");

form.addEventListener("submit", (e) => {

    e.preventDefault();

    fetch("http://localhost:5000/form-post", {
            method: "POST",
            mode: "cors",
            body: {
                firstName: e.target.firstName.value,
                lastName: e.target.lastName.value
            } 
        })
        .then((res) => res.json())
        .then((data) => console.log(data));
});

Экспресс-сервер 

const express = require("express");
const app = express();

const cors = (req, res, next) => {

    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET, PUT, PATCH, POST, DELETE");
    res.header("Access-Control-Allow-Headers", "Origin, Content-Type");

    next();
};

app.use(cors);
app.use(express.json());

app.post("/form-post", (req, res) => {

    res
        .status(200)
        .json({
            First_Name: req.body.firstName,
            Last_Name: req.body.lastName
        });

});

app.listen(5000, () => console.log("Server started on port 5000..."));

[EDIT:] В Postman работает нормально (снимки экрана прилагаются), но, похоже, не работает с Fetch.

enter image description here

1 Ответ

0 голосов
/ 14 сентября 2018

Вы не можете POST простой объект JavaScript.

Но, пожалуйста, проверьте все возможные значения Content-type, как определено в RFC 1341 , со списком типы MIME .

Согласно MDN

Тип данных тела выборки должен соответствовать заголовку «Content-Type» .

Попробуйте вместо этого код. 

const form = document.getElementById("myForm");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  var data = {
    firstName: e.target.firstName.value,
    lastName: e.target.lastName.value
  }

  fetch("http://localhost:5000/form-post", {
      method: "POST",
      mode: "cors",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      body: JSON.stringify(data)
    })
    .then((res) => res.json())
    .then((data) => console.log(data));
});
...