I've read multiple answers on this topic, but none of them works for me so far. I've tried changing the request on the client side:

const res = await axios.post(url,
      body,
      {
        headers: {
          'Access-Control-Allow-Origin': '*',
          "Access-Control-Allow-Methods": "*",
          'Content-Type': 'application/json',
          "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
        },
      }
    );

as well as configuring the CORS on the backend:

app.options("*", cors({ origin: 'http://localhost:3000', optionsSuccessStatus: 200 }));
app.use(cors({ origin: "http://localhost:3000", optionsSuccessStatus: 200 }));

The error message in Chrome is: Access to XMLHttpRequest at 'localhost:8000/api/user/register/' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

On Firefox: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at localhost:8000/api/user/register/. (Reason: CORS request not http).

What am i doing wrong?

edit: I checked the req headers on localhost:8000 (the one i am fetching):

Looks like localhost:3000 is allowed, but it still doesn't work