Enable CORS Ionic to send http

Question

I want to send an HTTP POST request by clicking a button to server, which is located at a different domain. Its working on POSTMAN

Below is the code

faceImageValidation(faceImage) {

    let headers =  {headers: new  HttpHeaders({ 
    'Content-Type':'application/json',
    'account-id': '8912292327fe',
    'api-key': '2c0652c54747'})
    }; 

   let postData = {
       "task_id": '74f4c926-250c-43ca-9c53-453e87ceacd1',
       "group_id": '8e16424a-58fc-4ba4-ab20-5bc8e7c3c41e',
       "data": {
       "document1": documentLink
       }
   };
   this.httpClient.post('https://eve.idfy.com/v3/tasks/sync/check_photo_liveness/face', JSON.stringify(postData),headers).subscribe(data => {
       console.log(data);
    },error =>{
              console.log(error);
    });
}

Below is the error

Access to XMLHttpRequest at 'https://eve.idfy.com/v3/tasks/sync/check_photo_liveness/face' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I also tried adding Access-Control-Allow-Origin in header but its still giving me error.

Please be sure to redact any potentially sensitive information (account ID, API keys) before posting. If these are production credentials, you'll want to rotate them ASAP. — Matt Borja, Nov 12 '19 at 05:55
Are you sure this is supposed to be implemented in JavaScript (client-side)? — Matt Borja, Nov 12 '19 at 06:31
CORS Policy has to be allowed from the server side (https://eve.idfy.com/v3/tasks/sync/check_photo_liveness/face) first, before it can accept such requests coming from your end (http://localhost:8100). Unless you use some browsers' CORS extension to enable cross-origin resource sharing. — Tolulope Owolabi, Nov 12 '19 at 06:34
I'm using 3rd party library, so it cant be done from server side — user2185354, Nov 12 '19 at 09:43

score 0 · Answer 1 · answered Nov 12 '19 at 06:35

Are you sure this is supposed to be implemented in JavaScript (client-side)? If it works in Postman, it's likely due to direct HTTP requests where CORS isn't a factor. The destination resource (i.e. eve.idfy.com) would have to send "Access-Control-Allow-Origin" indicating it will accept a request from your JavaScript origin (localhost) which technically isn't possible.

I would advise implementing your API using server-side code and provide yourself with your own local, CORS-friendly endpoint for your client-side code to load from if it's still absolutely necessary. This will also help to mitigate disclosure of your API access credentias.

See also Deadly CORS when http://localhost is the origin

Enable CORS Ionic to send http

1 Answers1