What I'm doing is, after choosing a file it calls an API. If it's a success (valid file) it gives me the total price. If it's a falsely formatted file, it gives me the relevant error from the backend.

Now, when I choose a correct file it works perfectly. But when I use a wrong file - it doesn't give me the error but it gives me following errors.

When I make the API call I get a CORS error saying :

POST net::ERR_ABORTED 422 (Unprocurable Entity)

Access to fetch at '' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

But I get this only when I upload a file with false format. When I use Moesif CORS everything works perfectly.

But when I do this without Moesif CORS I get above error only when I load an incorrect file.

I tried using mode: "no-cors" also, But it didn't help me to get rid of POST error I'm getting.

Token is ing to the page because I printed it at the page load and it printed.

Here is how API header looks like.

var res = fetch('', {
    method: "POST", // POST
    mode: "cors",
    cache: "no-cache",

    headers: {
        'Content-Type': 'application/json; charset=utf-8',
        'Access-Control-Allow-Origin': '*',
        'Accept': 'application/json',
    'Authorization': localStorage.getItem("userToken")

    },

    redirect: "follow",
    referrer: "no-referrer",