Node js Heroku No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I have the following headers setup in my node js api app:

  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested, Content-Type, Accept Authorization"
  );
  if (req.method === "OPTIONS") {
    res.header(
      "Access-Control-Allow-Methods",
      "POST, PUT, PATCH, GET, DELETE"
    );
    return res.status(200).json({});
  }
  next();
});

With this config I can send GET, POST request to my api hosted in heroku from Postman. But when I try from my frontend app built with vue. I get the following error.

And I'm using fetch to send the request to remote api:

async signup() {
  try {
    const formData = new FormData();
    formData.firstName = this.firstName;
    formData.lastName = this.lastName;
    formData.email = this.email;
    formData.password = this.password;
    formData.confirmPassword = this.password;
    formData.mobile = this.mobile;
    formData.gender = this.gender;
    formData.profileImg = this.profileImg;
    const response = await fetch(
      "https://api-url.com/auth/patient/signup",
      {
        body: formData,
        method: "POST",
      }
    );
    const data = await response.json();
    this.response = JSON.stringify(data);
  } catch (error) {
    console.log(error);
  }
}

Can anyone point the mistakes I've made here ?

Answer 1

I think you need to set the headers in the fetch call. I see that you have already added body and method.

headers: { 'Content-Type': 'application/json' }