使用 XMLHttpRequest 在 Javascript 中发生 POST 错误

Question

我正在开发一个需要 API 的项目，更准确地说，需要 POST 方法。我读过关于它的堆栈溢出线程，但它没有多大帮助：他们只是说使用Access-Control-Allow-Origin尽管我已经这样做了。所以，这是前端的一面：const CHEMIN_AU_SERVEUR = "http://localhost:3000/api/stuff";const func_that_post_the_card_created = (path, json) => {    const request_projets_post = new XMLHttpRequest();    request_projets_post.open("POST", path, true);    request_projets_post.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    request_projets_post.send(JSON.stringify(json));};func_that_post_the_card_created(CHEMIN_AU_SERVEUR, "title=title&description=description&imageUrl=imageUrl&href=href&github_href=github_href");这里是服务器端server.jsconst http = require('http');const app = require('./app');app.set('port', process.env.PORT || 3000);console.log(process.env.PORT || 3000);const server = http.createServer(app);server.listen(process.env.PORT || 3000);应用程序.jsconst express = require("express");const app = express();const bodyParser = require("body-parser");const ProjectScheme = require("./models/Project");const mongoose = require("mongoose");// The mongoose connect that will not showapp.use((req, res, next) => {  res.setHeader("Access-Control-Allow-Origin", "*");  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content, Accept, Content-Type, Authorization");  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH, OPTIONS");  next();});app.use(bodyParser.json());app.post("/api/stuff", (req, res, next) => {  const projet = new ProjectScheme({ ...req.body });  projet.save()    .then(() => res.status(201).json({ message: "Projet enregistré !" }))    .catch((error) => res.status(400).json({ error }));});谢谢你的帮助。这将会非常有帮助。我认为这也会帮助很多其他人。

Answer 1

问题就在这里：

request_projets_post.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

request_projets_post.send(JSON.stringify(json));

在第一行中，您将内容类型设置为application/x-www-form-urlencoded。在第二个中，您的正文是一个 JSON 字符串。

您发送到该函数的数据是经过 urlencoded 的：

title=title&description=description&imageUrl=imageUrl&href=href&github_href=github_href

但在你的服务器上，你将正文解析为 json：

app.use(bodyParser.json());

您不能混合编码。您需要决定是使用 JSON 还是 urlencoded：

JSON

在你的前端：

request_projets_post.setRequestHeader("Content-type", "application/json");

request_projets_post.send(JSON.stringify(json));

您提供给函数的数据是一个对象：

func_that_post_the_card_created(CHEMIN_AU_SERVEUR, {

  title: title,

  description: description,

  imageUrl: imageUrl,

  href: href,

  github_href: github_href

});

后台无需修改

URL编码

不要使用 JSON.stringify：

const func_that_post_the_card_created = (path, data) => {

    const request_projets_post = new XMLHttpRequest();

    request_projets_post.open("POST", path, true);

    request_projets_post.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    request_projets_post.send(data);

};

func_that_post_the_card_created(CHEMIN_AU_SERVEUR, "title=title&description=description&imageUrl=imageUrl&href=href&github_href=github_href")

在您的服务器中删除该行

app.use(bodyParser.json());

并添加：

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