About Integrate biometric device in angular

[abstract field]

@wild lily Hi, your original message was removed because it contained a link to google drive. We can not verify contents of such links, so please rephrase your message to not include the google drive link

[wild lily]

I have to integrate mfs biometric device rd service but getting cors error in production but locally working how to fix this error..

captureData(): Observable<any> {
if (this.captureUrl !== '') {
let doc = document.implementation.createDocument("", "", null);
let pidOptionsElem = doc.createElement("PidOptions");
let optsElem = doc.createElement("Opts");

  optsElem.setAttribute("fCount", '1');
  optsElem.setAttribute("fType", '2');
  optsElem.setAttribute("iCount", '0');
  optsElem.setAttribute("pCount", '0');
  optsElem.setAttribute("format", '0');
  optsElem.setAttribute("pidVer", "2.0");
  optsElem.setAttribute("timeout", '10000');
  optsElem.setAttribute("posh", "UNKNOWN");
  optsElem.setAttribute("env", "P");

  pidOptionsElem.appendChild(optsElem);
  doc.appendChild(pidOptionsElem);

  const headers = new HttpHeaders({
    'Content-Type': 'application/xml',
    'Accept': 'application/xml'
  });

  return this.customRequest('CAPTURE', this.captureUrl, new XMLSerializer().serializeToString(doc), headers).pipe(
    map(response => {
      let parser = new DOMParser();
      let xml = parser.parseFromString(response as string, "application/xml");
      var xmlText = new XMLSerializer().serializeToString(xml);
      let resp = xml.querySelector("Resp");
      let errCode = resp?.getAttribute('errCode');
      let errInfo = resp?.getAttribute('errInfo');
      let qScore = resp?.getAttribute('qScore');
      return {
        status: errCode === '0' ? 1 : 2,
        message: errCode === '0' ? `Capture Success: Quality - ${qScore}` : `Capture Failed: ${errInfo}`,
        captureSuccess: errCode === '0',
        pidData: xmlText
      };
    }),
    catchError(() => of({ status: 2, message: 'Capture failed' }))
  );
} else {
  return of({ status: 2, message: 'Device is not ready for capture!' });
}

}

[wild lily]

Ok @abstract field

[river nova]

If you're getting CORS errors, the server (at this.captureUrl) needs to properly set CORS headers.

[abstract field]

CORS errors need to be resolved on your backend, you need to configure it to be able to receive requests from the domain your frontend is on

[wild lily]

{
"http://127.0.0.1:11101/": {
"target": "http://127.0.0.1:11101",
"secure": false,
"changeOrigin": true,
"logLevel": "debug",
"pathRewrite": {
"^/api": ""
}
}
}

this is my proxy.conf.js file is it correct or not?

[abstract field]

proxy only works locally in development, for production you need to configure your backend

[wild lily]

can you elaborate with example which header pass for fixing cors error?

[abstract field]

You don't need a header, you need to configure some middleware for your server that allows/disallows requests. What backend are you using (e.g. express, .net, etc)?

[river nova]

Your backend needs to send the proper CORS headers.
You can learn about CORS on MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.
In the most basic setup the server only needs to send the Access-Control-Allow-Origin header and handle the CORS preflight. However as Michael said, there is probably a ready-made middleware for whatever backend you are using.

[wild lily]

I am using php ci4 for backend

[river nova]

https://codeigniter.com/user_guide/libraries/cors.html

[abstract field]

Ok, follow the link that diesieben07 posted and it should explain you how to set it up

[wild lily]

already set headers at backend because other api works properly..

but using biometric device I have to integrate aeps

[river nova]

If your frontend is making a request directly to that "biometric device" then that device needs to send the CORS headers.

[wild lily]

yes this is actual..
then how to send the cors header..?

[river nova]

You have to look in the documentation for that device.

[wild lily]

In this document not getting any idea about cors error how to fix it?

[wild lily]

not getting in this document of above attached..
how to fix it?

[river nova]

Look at the network tab in your browser devtools when the request happens. Does the device send proper CORS headers back?

I also see zero API documentation in the documents you linked

[river nova]

Is that the preflight request?

[wild lily]

yes

[river nova]

There's no response headers shown. So it seems like the device just does not respond to CORS preflight requests.

Since there is no mention of it in the docs you sent, I would contact the manufacturer if they support it. If not, there is no way to do this directly in the browser.