CORS problem with POST https request

[vespinasgmailcom]

I need to send a request to a bank payment API from an Ionic app, using the Angular HTTP Client service. The request shouldn’t triggera CORS preflight because:

1. Use a POST verb
2. The only header added is Content-Type: text/plain
3. The expected response is text/plain.

If I try the request using Postman or Isomnia, I see there is no OPTIONS preflight and the request returns the expected response.

But when I try the same request from Ionic, using this code:

      const headers = new HttpHeaders({
        "Content-Type": "text/plain",
        "Accept": "text/plain"
      });

      const url = "https://..../Authorize3DS";
      this.http
          .post(url, xmlData, {
          	headers: headers
          })

then I get this error, both from local server or from the actual app:

{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"https://.../Authorize3DS","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://.../Authorize3DS: 0 Unknown Error","error":{"isTrusted":true}}

I am positive that this is a CORS issue because if I install a CORS-enabler on my browser and retry the request, then it works perfectly. Also, I tried other REST servers under HTTPS and they all work perfectly, so it must be something related to the CORS implementations on the bank’s webervice, but I can’t figure out what could it be and what to do in my ionic app to get this working.

Any ideas?

TIA

[rapropos]

@vespinasgmailcom

Any ideas?

You’ve made a detailed and convincing case, so my first instinct is to question the assumptions. Can you capture the precise request as it goes over the wire both in the Postman and Ionic case (Chrome’s developer tools Network tab should help here)? Any tiny difference might be relevant.

[vespinasgmailcom]

@vespinasgmailcom

{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"https://.../Authorize3DS","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://.../Authorize3DS: 0 Unknown Error","error":{"isTrusted":true}}

I am positive that this is a CORS issue because if I install a CORS-enabler on my browser and retry the request, then it works perfectly. Also, I tried other REST servers under HTTPS and they all work perfectly, so it must be something related to the CORS implementations on the bank’s webervice, but I can’t figure out what could it be and what to do in my ionic app to get this working.

Any ideas?

TIA

Just did that. The main difference seems to be that Ionic is adding this to the request header:

Origin: http://localhost:8100
Referer: http://localhost:8100/

It may be the case that the bank’s gateway CORS configuration is actively blocking requests with localhost as origin. In the meantime, I was able to solve the problem (at device level, at least) by using Ionic Native HTTP client.

Insomnia request header:

Ionic request header: