CORS related problem, i cannot proceed to a POST request

Question

I'm having some troubles trying to make my backend and front communicate to each others (reactjs + vanilla NODEjs), both on different localhost port (4000 and 3000)

I managed to make it work until i wanted to try to add data to my database. I can GET data with my react app but i can't POST any data. Here is the code for both sides :

front : `

const sendData = async (event: any): Promise<void> => {
    console.log("hello");
    event.preventDefault();
    const response = await fetch(`${_DATA_URL_}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(employeeForm),
    });
    const data = await response.json();
    console.log(data);
  };

` back :

const Router = (req, res) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type, Accept, Origin, Authorization"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, PATCH, OPTIONS"
  );
  console.log("hello"); //debug
  if (req.method === "GET") {
    if (req.url === "/api/employees") {
      getEmployees(req, res);
    } else if (req.url.match(/\/api\/employees\/(\w{4}-?){3}/)) {
      const requestID = req.url.split("/")[3];

      getEmployee(req, res, requestID);
    } else {
      res.statusCode = 404;

      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify({ message: `Error : ${req.url} not found !` }));
    }
  }
  if (req.method === "POST") {
    if (req.url === "/api/employees") {
      createEmployee(req, res);
    } else {
      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify({ message: `Error : ${req.url} not found !` }));
    }
  }
  if (req.method === "DELETE") {
    if (req.url.match(/\/api\/employees\/(\w{4}-?){3}/)) {
      const requestID = req.url.split("/")[3];
      deleteEmployee(req, res, requestID);
    } else {
      res.statusCode = 404;

      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify({ message: `Error : ${req.url} not found !` }));
    }
  }
  if (req.method === "PUT") {
    if (req.url.match(/\/api\/employees\/(\w{4}-?){3}/)) {
      const requestID = req.url.split("/")[3];
      updateEmployee(req, res, requestID);
    } else {
      res.statusCode = 404;

      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify({ message: `Error : ${req.url} not found !` }));
    }
  }
};

i'm pretty sure it comes from react side because posting data works fine when i use POSTMAN, and after a while on localhost i receive this error in the console :

Maybe i'm using cors incorrectly, anyways thanks for your futures answers

Please dont post images but add the error code as snippet here. Apart from this, the error does not look like its CORS related. Its saying `ERR_CONNECTION_RESET`, perhaps you have some other bug in your backend. — The Fool, Oct 30 '22 at 13:45
in your post handler, when you create the employee, maybe you forgot to call `res.end`. Its hard to tell because you dont show that function but you pass in the response object, so it seems like this is at least your intention. — The Fool, Oct 30 '22 at 13:50
Hello, yes its a bit confusing beacuse it seems there is no place (at least in the code) where this could happen, here is the link of my repo where i store it [link](https://github.com/nathanLR/myemployeesmanagerbackend/tree/main/logic) — Nathan, Oct 30 '22 at 15:11
It could happen if you have an error in the try block in that createEmplyee function. I see that in this case `res.end` is not called which would lead to the error you show. `ERR_CONNECTION_RESET` looks really like your server is never responding properly. — The Fool, Oct 30 '22 at 17:43
Ah, yes as you show, you also don't handle the options request, and thus don't respond properly in that case either. Btw, I dont think your current answer qualifies as one in its current form. — The Fool, Oct 30 '22 at 17:45

score 0 · Answer 1 · answered Oct 30 '22 at 16:01

0

I figured it out,

answer here (in french) and here

answered Oct 30 '22 at 16:01

Nathan

13
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 02 '22 at 16:39

CORS related problem, i cannot proceed to a POST request

1 Answers1