CORS 400 Bad Request with fetch, express server

Question

I'm trying to send a POST request from 127.0.0.1:8080 to my express server in localhost:3000/trips I'm having a lot of problem with the cors configuration

First, this is my method to do the POST request

   async modifyTrip() {
      let json = {
        data: "test",
        mezzo: "test",
        coordinate: ["test"],
        tappe: ["test"],
      };
      let modifyform = document.getElementById("add-form");
      modifyform.onsubmit = async (e) => {
        e.preventDefault();
        await fetch("http://localhost:3000/trips", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: json,
        });
      };
    }

On the server side if I put cors options at that point returns me that error:

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.use(
  cors({
    "Access-Control-Allow-Origin": "*",
    "Allow-Methods": "GET, POST, DELETE, FETCH",
  })
);
app.use("/user", userRoutes);
app.use("/trips", tripsRoutes);

If I try to change the position the error is different my it always gives me problem

app.use(
  cors({
    "Access-Control-Allow-Origin": "*",
    "Allow-Methods": "GET, POST, DELETE, FETCH",
  })
);
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use("/user", userRoutes);
app.use("/trips", tripsRoutes);

I don't think the matter is of where I put it, but I can't fix this problem anyway. Maybe I have to change some headers in my client side, but i really can't figure it out

Thank you.

Answer 1

It's a 400 Bad Request error, so look up what that means :

The HyperText Transfer Protocol (HTTP) 400 Bad Request response status code indicates that the server cannot or will not process the request due to something that is perceived to be a client error (for example, malformed request syntax, invalid request message framing, or deceptive request routing).

So something is wrong with the request and the server is complaining (before it gets to the bit of code which would add the CORS response headers). The CORS error is a side-effect , not the main problem.

If you look at the Network tab of your browser's developer tools , you will be able to examine the request.

The body will look something like this:

[object Object]

Now, you said (using a Content-Type header) you were POSTing JSON, but [object Object] is not JSON (or even a usable representation of your data).

You need to pass JSON to body and not an object. Since you are passing an object, it gets stringified using the default JS mechanism (which gives "[object Object]" ).

Use JSON.stringify(your_object) to convert it to JSON.