insta360 X2 OSC (open spherical camera) api call failed in preflight angular

Issue

I am trying to send get call to the camera http://192.168.42.1/osc/info from angular ionic application . This request stuck in preflight. I suspect this might be the CORS issue and I had tried below code but this did not work.

getinfo()
  {
    const headers =new HttpHeaders({
      'X-XSRF-Protected': '1',
      'Content-Type': 'application/json;charset=utf-8',
      'Accept': 'application/json',
      'Access-Control-Allow-Headers':'*',
      'Access-Control-Allow-Origin':'*',
      'Access-Control-Allow-Methods':'GET'
    })

    this.http.get("http://192.168.42.1/osc/info",{headers: headers}).subscribe(data => {
    console.log("Result:"  + data);
    return data;
  }, error => {
    console.log('Error'+ error);
  });

above get method is getting called in another ts file like

this.results = this.servicename.getinfo();

above result I am displaying in html page

I also followed the INSTA360 OSC API LINK and passed the mentioned headers except content length as this is get call.

This same reqeust when I hit from the browser or from postman then it works and give the results. I also tried to change the host to 192.168.42.1:6666 but not get expected result. To avoid CORS error I change the Content type to text/plain but still got same issue Is there anything I am missing.

Solution

Use CapacitorHttp plugin to use native http instead of angular. This is how I got around the CORs issue.

Answered By - StackoverBlows