Auth0 MFA enrollement API from front-end getting CORS error

Help
1

I am trying to enroll new mobile number as a MFA device from my own front-end. For that I have enabled MFA grant for public client (even though it is not safe).

But when I call enrollment API from front-end, sometimes I am getting CORS error (sometime it is working).

Access to fetch at 'https://<auth-tenant-host>/mfa/associate' from origin 'http://localhost:3000' 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.

Here is my React code

const mfaToken = await getAccessTokenWithPopup(
          {
            audience: `https://${auth0Config.domain}/mfa/`,
            scope: "remove:authenticators enroll",
          },
          { timeoutInSeconds: 60 * 5 }
        );
const response = await fetch(
          `https://${auth0Config.domain}/mfa/associate`,
          {
            method: "POST",
            body: JSON.stringify({
              authenticator_types: ["oob"],
              oob_channels: ["sms"],
              phone_number: contactDetails?.phone,
            }),
            headers: {
              "Content-Type": "application/json",
              authorization: `Bearer ${mfaToken}`,
            },
          }
        )
          .then((res) => res.json())
          .catch((e) => console.log(e));

What I need to do to avoid this CORS issue ?

Thanks,
Srikanth D.