I have an API that initiates scans for biometric data via a biometric device connected through USB and verifies the same data from the biometric device. This API has been installed on my Windows machine and has been integrated into a React app.

The API can be accessed on the local machine via http://localhost:1234/. I wrote a service in the React app for initiating a scan

   export const makeCaptureRequest = async() => {
    const instance = axios.create(
        {
            baseURL:"http://localhost:1234/",
            headers: {
                "Content-type":'application/json',
              },
        }
    )

    return await instance.post("?type=capture&temp1=ss&temp2=ss&temp3=ss")
}

and the service for verifying the biometric data captured via the same API

export const makeVerificationRequest = async(temp1, temp2, temp3) => {
    const instance = axios.create(
        {
            baseURL:"http://localhost:1234/",
            headers: {
                "Content-type":'application/json',
              },
        }
    )
    

    return await instance.post(`?type=verify&temp1=${temp1}&temp2=${temp2}&temp3=${temp3}`)
}

This is how the services are being used

const initiateAndVerifyFingerCapture = () => {
        if(biometricVerificationPassed){
            alert("Print has already been verified. Proceed with transaction")
            setDisableOrderButton(false)
            return
        }
            setOpenBiometricScanDialogue(true)
            setBiometricScanDialogueText("Place finger on device to begin scanning")
            makeCaptureRequest().then(
                response => {
                    if (response.data.status == "success") {
                        setScannedBiometricData(response.data.template)
                        setBiometricScanDialogueText("Scan Complete. Verifying... ")
                        verifyBiometricData()
                    } else if (response.data.status === "fail") {
                        alert("failed")
                        setOpenBiometricScanDialogue(false)
                    }

                }
            ).catch(
                error=>{
                    if(error){
                        alert("An error occurred, please try again")
                    }
                }
            )
    }

const verifyBiometricData = () => {
        subscriberBioData.find(async (item) => {
           
            makeVerificationRequest(item.temp1, item.temp2, item.temp3).then(
                response =>{
                    console.log(response)
                    if(response.data.score >=65){
                                         setBiometricScanDialogueText("Print has been verified. Please complete transaction")
                                         setBiometricVerificationPassed(true)
                                         setDisableOrderButton(false)
                                         return response.data.status =="success" && response.data.score >=65
                                     }else{
                                        console.log(response)
                                         setBiometricScanDialogueText("Verification failed, please try again")
                                        setBiometricVerificationFailed(true)
                                     }
                }
            )

        })
    }

Initiating a scan throws the following error in the console

Access to XMLHttpRequest at ‘http://localhost:1234/?type=capture&temp1=ss&temp2=ss&temp3=ss’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: Request header field baggage is not allowed by Access-Control-Allow-Headers in preflight response.

The react app is hosted online on the Digital Ocean app platform. I have no access to the API code. The API came as an executable file with the biometric device.

How can I resolve the CORS error? Using a proxy does not seem to work.