这是我的后端cors()中间件和cors()不改变我的任何东西，我相信post与postman它的工作，但当我使用我的前端post(添加教师)抛出错误
const express = require("express");
const app = express();
const morgan = require("morgan");
// const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const cors = require("cors");
const path = require("path");
require("dotenv").config();
//-----------------------------add routers paths-----------------------------//
const cardsRouter = require("./src/router/Cards");
//-----------------------------Connect with mongodb-----------------------------//
mongoose
.connect(process.env.DB_CONNECT)
.then(() => console.log("mongo connected"))
.catch((err) => console.log(err));
//-----------------------------middleware-----------------------------//
app.use(morgan("dev"));
app.use("./uploads", express.static("uploads"));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors());
app.enabled("trust proxy");
app.enable("trust proxy");
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", ["*"]);
res.header(
"Access-Control-Allow-Headers",
"Origin,X-Requested-With,Content-Type,Accept,Authorisation"
);
res.header("preflightContinue", "False");
// if (req.method === 'OPTIONS') {
res.header("Access-Control-Allow-Methods", "PUT,PATCH,GET,POST,DELETE");
// res.json();
// }
next();
});
// app.use(express.static(path.join(__dirname, "public")));
//-----------------------------Routers---------------------------//
app.use("/card", cardsRouter);
//-----------------------------Handling errors---------------------//
app.use((req, res, next) => {
const error = new Error("Not found");
res.status(404);
next(error);
});
app.use((error, req, res, next) => {
res.status(500 | Error.status).json({
message: error.message,
});
});
module.exports = app;
- 我试图改变我的导航器，因为一些导航器给出错误iss和userAgent *
exports.post_cards = async (req, res, next) => {
try {
console.log(req.body);
const cardss = new cards({
imagesCard: req.file.path,
NameTeacher: req.body.NameTeacher,
Module: req.body.NameModule,
spantext1: req.body.spantext1,
spantext2: req.body.spantext2,
spantext3: req.body.spantext3,
});
const data = await cardss.save();
return res.status(202).json({
message: "Created cards successfuly",
cards: {
doc: data,
request: {
type: "GET",
url: `http://localhost:3002/Card/${data._id}`,
},
},
});
} catch (error) {
console.log(error);
res.status(404).send("${error}");
}
};
const mongoose = require("mongoose");
const card_shcema = new mongoose.Schema({
imagesCard: { type: String, required: true },
NameTeacher: { type: String, required: true },
Module: { type: String, required: true },
spantext1: { type: String, required: true },
spantext2: { type: String, required: true },
spantext3: { type: String, required: true },
});
module.exports = mongoose.model("cards", card_shcema);
import React from "react";
import "./style.css";
import { creatProduct } from "../../api/posts";
import { useNavigate } from "react-router-dom";
import { useFormik } from "formik";
// import axios from "axios"
// import { Route, Switch, useHistory } from "react-router-dom";
const Formcard = () => {
const navigate = useNavigate();
const formik = useFormik({
initialValues: {
imagesCard: "",
NameTeacher: "",
Module: "",
spantext1: "",
spantext2: "",
spantext3: "",
},
onSubmit: (values) => {
console.log(values);
const formData = new FormData();
for (let value in values) {
formData.append(value, values[value]);
}
creatProduct(formData); //this for posting with axios
navigate("/");
},
});
// const [imagesCard, setimagesCard] = useState("");
// const [NameTeacher, setNameTeacher] = useState("");
// const [Module, setModule] = useState("");
// const [spantext1, setspantext1] = useState("");
// const [spantext2, setspantext2] = useState("");
// const [spantext3, setspantext3] = useState("");
// const [posts, setPosts] = useState([]);
// const handleclick = async (e) => {
// e.preventDefault();
// const course = {
// imagesCard,
// NameTeacher,
// Module,
// spantext1,
// spantext2,
// spantext3,
// };
// try {
// const response = await creatProduct(course);
// const allPosts = [...posts, response.data];
// setPosts(allPosts);
// navigate("/");
// } catch (err) {
// console.log(`Error: ${err.message}`);
// }
// };
return (
<div className="formcards">
<form method="post" encType="multipart/form-data">
{/* <input
type="text"
name="Instructor"
id="Instructor"
placeholder="Instructor"
onChange={(e) => setInstructor(e.target.value)}
/> */}
<label htmlFor="myfilecard">Select images:</label>
<input
type="file"
id="myfilecard"
accept="image/*"
multiple={false}
name="imagesCard"
// value={formik.values.imagesCard}
onChange={(e) =>
formik.setFieldValue("imagesCard", e.currentTarget.files[0])
}
/>
<input
type="text"
name="NameTeacher"
id="NameTeachercard"
placeholder="NameTeacher"
value={formik.values.NameTeacher}
onChange={formik.handleChange}
/>
<input
type="text"
id="Modulecard"
placeholder="Module"
name="Module"
value={formik.values.Module}
onChange={formik.handleChange}
/>
<input
type="text"
id="spantext1card"
placeholder="NbrBook"
name="spantext1"
value={formik.values.spantext1}
onChange={formik.handleChange}
/>
<input
type="text"
id="spantext2card"
placeholder="NbrUserGroup"
name="spantext2"
value={formik.values.spantext2}
onChange={formik.handleChange}
/>
<input
type="text"
id="spantext3card"
placeholder="NbrStar"
name="spantext3"
value={formik.values.spantext3}
onChange={formik.handleChange}
/>
<button
onSubmit={formik.handleSubmit}
type="submit"
variant="contained"
color="secondary"
>
Add Teacher
</button>
</form>
</div>
);
};
export default Formcard;
import axios from "axios";
export const API = axios.create({ baseURL: "http://localhost:3002" });
export const creatProduct = (newProduct) =>
API({
method: "POST",
url: "/card",
headers: {
"Content-Type": "multipart/form-data",
},
data: newProduct,
});
export const creatProductSecond = (newProduct) =>
API({
method: "POST",
url: "/secondCardsRouter",
headers: {
"Content-Type": "multipart/form-data",
},
data: newProduct,
});
export const fetchProductSecond = (newProduct) =>
API({
method: "GET",
url: "/secondCardsRouter",
headers: {
"Content-Type": "multipart/form-data",
},
data: newProduct,
});
我试图用sudo命令不工作来给它权限
我解决了这个问题，更新到这个
app.use(morgan("dev"));
app.use("/uploads", express.static("uploads"));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors());
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, Authorization"
);
if (req.method === "OPTIONS") {
res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
return res.status(200).json({});
}
next();
});
和
Module: req.body.Module,
和这里是什么，它导致500内部错误通过改变在sumit函数