POSThttp://localhost:3000/ [HTTP/1.1 500 Internal Server Error 197ms]

Question

this is my backend cors() middleware and cors() doesb't change for me abything and i tru post with postman it work but when i use my front-end to post(add teacher) throw to error

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;

i tried to change my navigator because some navigator give error of iss and 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,
  });

i tried to to give it permission with sudo command not working

It tell you there was an internal server error, 500 is a generic error, you need to check the error logs. — YurongDai, Dec 02 '22 at 03:26
i cleaned all the error just the 500 internal server error is showed ,except that 500 there are no log showed — Hi Chem, Dec 02 '22 at 09:28
if you want to check link backend https://github.com/ghazali-web/backend_platforme and this frontend https://github.com/ghazali-web/fornt_end_platforme — Hi Chem, Dec 02 '22 at 09:33

Hi Chem · Accepted Answer · 2022-12-07T07:23:14.983

i solve it by updating to this

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

and this

Module: req.body.Module,

and here what it cause the 500 intrnal error by changing the formik on sumit function <form onSubmit={formik.handleSubmit} and it work in (front and back) end

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("/");
    },
  });


  return (
    <div className="formcards">
      <form   onSubmit={formik.handleSubmit}     >
       
        <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 type="submit" variant="contained" color="secondary">
          Add Teacher
        </button>
      </form>
    </div>
  );
};

export default Formcard;

I'm glad your problem was solved, if you can mark your answer later, it will lead more people in the right direction. — YurongDai, Dec 07 '22 at 08:57

POSThttp://localhost:3000/ [HTTP/1.1 500 Internal Server Error 197ms]

1 Answers1