Question

我正在尝试使用 fetch API 将表单数据发送到后端，但是当我 console.log 我的 request.body 时，它返回一个空对象 {}。我试图发送到我的后端的是用户输入的名字、姓氏、电子邮件和消息。为什么不包含数据的对象。我哪里做错了。任何帮助表示赞赏。提前致谢。

//backend
const express = require('express');
const app = express();

app.listen(3000, () => console.log('listening at port 3000'));
app.use(express.static('public'));
app.use(express.json({
  limit: '1mb'
}));

app.post('/api', (request, response) => {
  console.log('I got a request') //Prints I got a request
  console.log(request.body); //Prints {} (empty object)
});

//frontend
function proccessContactMessage() {
  firstName = document.getElementById('contactUsFirstName').value
  lastName = document.getElementById('contactUsLastName').value
  email = document.getElementById('contactUsEmail').value
  message = document.getElementById('contactUsMessage').value

  const data = {
    firstName,
    lastName,
    email,
    message
  };
  const options = {
    method: 'POST',
    mode: 'no-cors',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  };
  fetch('http://localhost:3000/api', options);
}

<form class="formContactUs">
  <div class="contactUsTitleCon">
    <h2 class="contactUsTitle">Contact Us</h2>
  </div>
  <div class="form-group">
    <label for="contactUsFirstName">First Name</label>
    <input type="text" class="form-control" id="contactUsFirstName" placeholder="Enter First Name" required>
  </div>
  <div class="form-group">
    <label for="contactUsLastName">Last Name</label>
    <input type="text" class="form-control" id="contactUsLastName" placeholder="Enter Last Name" required>
  </div>
  <div class="form-group">
    <label for="contactUsEmail">Email</label>
    <input type="email" class="form-control" id="contactUsEmail" placeholder="Enter Email" required>
  </div>
  <div class="form-group">
    <label for="contactUsMessage">Message</label>
    <textarea class="form-control" id="contactUsMessage" placeholder="Enter Message" required></textarea>
  </div>
  <div class="contactUsSubmitBtnCon"><button type="submit" class="btn btn-primary contactUsSubmitBtn" onclick="proccessContactMessage()">Submit</button></div>
</form>

Answer 1

从 mode: 'no-cors' 中删除 options。

这应该会给你想要的结果。

Answer 2

The no-cors mode doesn't support the Content-Type: application/json header。 Try to set up a CORS header 并删除 mode: 'no-cors' 属性。

Answer 3

从我们在第一个回答中的评论交流中可以了解到，问题来自 CORS。如果是这样，试试这个：

const cors = require('cors');

const corsOptions = {
  origin: (origin, callback) => {
    callback(null, true);
  },
  methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
  allowedHeaders: ["Access-Control-Allow-Origin", "Origin", "X-Requested-With", "Content-Type", "Accept", "Authorization"],
  credentials: true
};

app.options('*', cors(corsOptions));
app.use(cors(corsOptions));

Answer 4

我想，您需要一个正文解析器！您可以使用 body-parser 或 express.urlencoded()。

试试这个：

在您的 app.js 中：

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: false}));// we need to register a parser, to parse the incoming request body !

或者，您可以将其替换为：

app.use(express.urlencoded({ extended: true })); //Parse URL-encoded bodies

然后，你可以这样做：

console.log(req.body);

Answer 5

在函数 proccessContactMessage() 中，您将数据定义为：

  const data = {
    firstName,
    lastName,
    email,
    message
  };

但这不是有效的 JSON 对象。

//frontend
function proccessContactMessage() {
  firstName = document.getElementById('contactUsFirstName').value
  lastName = document.getElementById('contactUsLastName').value
  email = document.getElementById('contactUsEmail').value
  message = document.getElementById('contactUsMessage').value

  const data = {
    firstName: firstName,
    lastName: lastName,
    email: email,
    message: message
  };

  console.log(data);
  const options = {
    method: 'POST',
    mode: 'no-cors',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  };
  fetch('http://localhost:3000/api', options);
}

<form class="formContactUs">
  <div class="contactUsTitleCon">
    <h2 class="contactUsTitle">Contact Us</h2>
  </div>
  <div class="form-group">
    <label for="contactUsFirstName">First Name</label>
    <input type="text" class="form-control" id="contactUsFirstName" placeholder="Enter First Name" required>
  </div>
  <div class="form-group">
    <label for="contactUsLastName">Last Name</label>
    <input type="text" class="form-control" id="contactUsLastName" placeholder="Enter Last Name" required>
  </div>
  <div class="form-group">
    <label for="contactUsEmail">Email</label>
    <input type="email" class="form-control" id="contactUsEmail" placeholder="Enter Email" required>
  </div>
  <div class="form-group">
    <label for="contactUsMessage">Message</label>
    <textarea class="form-control" id="contactUsMessage" placeholder="Enter Message" required></textarea>
  </div>
  <div class="contactUsSubmitBtnCon"><button type="submit" class="btn btn-primary contactUsSubmitBtn" onclick="proccessContactMessage()">Submit</button></div>
</form>

发布请求返回空对象

5 个答案: