使用 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.js

const 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);

应用程序.js

const 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 show

app.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 }));