在 React 中使用生物识别设备 API 时出现 CORS 错误

Question

我有一个 API，可以通过 USB 连接的生物识别设备启动生物识别数据扫描，并验证来自生物识别设备的相同数据。该 API 已安装在我的 Windows 计算机上，并已集成到 React 应用程序中。

可以在本地机器上通过http://localhost:1234/访问该API。我在 React 应用程序中编写了一个用于启动扫描的服务

   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")
}

以及用于验证通过相同 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}`)
}

这就是服务的使用方式

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)
                                     }
                }
            )

        })
    }

启动扫描会在控制台中引发以下错误

从源“http://localhost:5173”访问“http://localhost:1234/?type=capture&temp1=ss&temp2=ss&temp3=ss”处的 XMLHttpRequest 已被 CORS 策略阻止：不允许请求标头字段行李通过预检响应中的 Access-Control-Allow-Headers。

React 应用程序在线托管在 Digital Ocean 应用程序平台上。我无法访问 API 代码。 API 作为生物识别设备的可执行文件提供。

如何解决 CORS 错误？使用代理似乎不起作用。

Answer 1

    const corsProxyUrl = 'https://cors-anywhere.herokuapp.com/';
const apiUrl = 'http://localhost:1234/';

export const makeCaptureRequest = async () => {
    const instance = axios.create({
        baseURL: corsProxyUrl + apiUrl,
        headers: {
            "Content-type": 'application/json',
        },
    });

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

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

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