# CORS problem with POST https request

**URL:** <https://forum.ionicframework.com/t/cors-problem-with-post-https-request/202331>\
**Category:** ionic-v3\
**Created:** [January 6, 2021, 3:42pm UTC](https://forum.ionicframework.com/t/cors-problem-with-post-https-request/202331 "2021-01-06T15:42:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![vespinasgmailcom](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vespinasgmailcom/32/127150_2.png) [@vespinasgmailcom](https://forum.ionicframework.com/u/vespinasgmailcom)\
**Post date:** [January 6, 2021, 3:42pm UTC](https://forum.ionicframework.com/t/cors-problem-with-post-https-request/202331/1 "2021-01-06T15:42:19Z")

</div>

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.

 ![Screen Shot 2021-01-06 at 12.32.18](https://global.discourse-cdn.com/ionicframework/original/3X/5/c/5c7a00b099d10a247ddf1a2e5a38443e8ab48a2c.png)

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

```auto
      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

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [January 6, 2021, 8:13pm UTC](https://forum.ionicframework.com/t/cors-problem-with-post-https-request/202331/2 "2021-01-06T20:13:45Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![vespinasgmailcom](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vespinasgmailcom/32/127150_2.png) [@vespinasgmailcom](https://forum.ionicframework.com/u/vespinasgmailcom)\
**Post date:** [January 6, 2021, 9:51pm UTC](https://forum.ionicframework.com/t/cors-problem-with-post-https-request/202331/3 "2021-01-06T21:51:51Z")

</div>

> [@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](http://localhost:8100)  
Referer: [http://localhost:8100/](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:

 ![Screen Shot 2021-01-06 at 12.51.40](https://global.discourse-cdn.com/ionicframework/original/3X/5/0/50abbf50e2b719706218d8f06fb473e3e3d57e54.png)

Ionic request header:

 ![Screen Shot 2021-01-06 at 12.51.50](https://global.discourse-cdn.com/ionicframework/original/3X/2/7/2718b01ec94b235aac5c843a4485cd5cfc653dc9.png)