【发布时间】：2021-06-10 14:35:48
【问题描述】：
我已经在后端使用 nodejs 制作了一个 restful API，这是我的文件夹结构：
├── server
│ ├── project.controller.js
│ ├── auth.js
│ └── project.routes.js
│ └── project.model.js
├── client
│ └── AddProjectModal.js
│ └── axios.service.js
│ └── auth-header.js
服务器 api 似乎工作正常，因为我可以使用邮递员执行 CRUD 操作，但是如果我尝试从响应的客户端发送发布请求，我不知何故无法继续。我尝试了几个小时使用 console.log 进行自我调试，以找出我做错的地方，但我找不到任何东西。
这是我的 AddProjectModal.js：
import React, { useState } from "react";
import { authAxios } from "../../services/axios.service";
const AddProjectModal = ({ isShow, isClose }) => {
const [newProject, setNewProject] = useState({
title: "",
type: "",
description: "",
//thumbnail: "",
});
const handleUpload = async (e) => {
e.preventDefault();
var formData = new FormData();
formData.append("title", newProject.title);
formData.append("type", newProject.type);
formData.append("description", newProject.description);
// formData.append("thumbnail", newProject.thumbnail);
console.log(...formData);
try {
await authAxios
.post("/api/project/", formData)
.then((res) => {
console.log(res.data);
})
.catch((e) => {
console.log(e);
});
} catch (err) {
console.log(err);
}
};
....
}如您所见，我尝试使用 console.log(...formData) 查看数据是否已成功附加，并且确实如此。这是示例结果：
这是我的 axios.service.js 代码：
import axios from "axios";
import authHeader from "./auth-header";
const apiUrl = "http://localhost:5000/";
export const authAxios = axios.create({
baseURL: apiUrl,
headers: authHeader(),
});
export const publicAxios = axios.create({
baseURL: apiUrl,
});我的 auth-header.js 代码：
const authHeader = () => {
const user = JSON.parse(localStorage.getItem("user"));
if (user && user.accessToken) {
return { "x-access-token": user.accessToken };
} else {
return {};
}
};
export default authHeader;还有我的后端代码：
project.routes.js：
const express = require("express");
const router = express.Router();
const auth = require("../../middleware/auth");
const controller = require("../../controllers/project.controller");
//Upload new project
router.post("/", auth, controller.createProject);
module.exports = router;project.controller.js：
const Project = require("../models/project.model");
// create & save new project
exports.createProject = async (req, res, next) => {
console.log(req.body);
if (!req.body.title || !req.body.type || !req.body.description) {
res.status(400).send({ message: "Form cant be empty!" });
return;
}
try {
//create project
const project = new Project({
title: req.body.title,
type: req.body.type,
description: req.body.description,
});
// save project to the database
const createdProject = await project.save();
res.send(createdProject);
} catch (err) {
console.log("err" + err);
res.status(500).send(err);
next(err);
}
};在上面的代码中，我试图通过 console.log(req.body) 查看数据是否正在传入，当我使用邮递员发布请求时，我得到了这个结果：
这是我从浏览器请求时的结果，我得到了空对象：
【问题讨论】：
-
首先你应该像
res.json({})一样将res作为json发送，并且在你的catch块中你不应该再发送响应，因为据我所知你正在使用错误处理程序中间件（下一个（错误）），而且我认为您有 cors 政策问题控制台在前面记录错误，看看您是否遇到 cors 政策问题
标签： node.js reactjs express axios