亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 XMLHttpRequest 在 Javascript 中發生 POST 錯誤

使用 XMLHttpRequest 在 Javascript 中發生 POST 錯誤

慕村225694 2023-06-29 15:42:18
我正在開發一個需要 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 }));});謝謝你的幫助。這將會非常有幫助。我認為這也會幫助很多其他人。
查看完整描述

1 回答

?
大話西游666

TA貢獻1817條經驗 獲得超14個贊

問題就在這里:


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


查看完整回答
反對 回復 2023-06-29
  • 1 回答
  • 0 關注
  • 194 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號