title: Angular 6 Redirect to external url using POST
body: <p>I am trying to incorporate payment gateway into angular app, I found following JavaScript snippet provided by the payment partner for incorporation, I tweaked it by adding <a href="https://stackoverflow.com/a/40234312/6181692">ngNoForm</a> and got it working with angular; <a href="https://stackblitz.com/edit/angular-c4mzx6" rel="noreferrer">stackBlitz</a></p>
  
  <pre><code>&lt;form ngNoForm method="post" action="https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp"&gt;
  &lt;input type="hidden" name="amount" value="1" &gt;
  &lt;input type="hidden" name="currCode" value="608" &gt;
  &lt;input type="hidden" name="payMethod" value="CC"&gt;
  &lt;input type="submit" name="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Next instead of using HTML <code>&lt;Form&gt; POST + Action</code> directly from component template, I wanted to make a REST call to my back end server perform some other steps and map that API response into what my payment partner expects and and then redirect to my payment partner using HttpClient POST which would supposedly do the same thing and redirect to the payment partner website which is supposed to take care of the payment process, so in short I wanted to achieve the same thing programmatically, I tried:</p>
  
  <pre><code>redirectToPaymentHandler(): Observable&lt;any&gt; {
    const urlEncodeData = 'amount=1&amp;currCode=608&amp;payMethod=CC';
    let headers = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers = headers.append('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8');
  
    return this.httpClient.post('https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp',
      urlEncodeData, {
        headers,
        responseType: 'text'
      }).pipe(catchError((error) =&gt; {
        console.log(error)
        return EMPTY;
      }));
  }
  </code></pre>
  
  <p>Initially I encountered CORS issue, but I was able to bypass that using Angular CLI's proxy config, now what happens is that instead of redirecting to the payment partner's website, HttpClient's POST method actually <strong>returns the web page as a string</strong> from the service endpoint, which is not what I though it would do,</p>
  
  <p>Kindly refer to this <a href="https://stackblitz.com/edit/angular-5qs5lm" rel="noreferrer">stackBlitz</a>, for further understanding.</p>
  
  <p>So to sum it all up, basically I am seeking to transform above working template driven POST request into programmatic version. so I could perform some set of operations first and then redirect to the external URL using POST. I believe what I am trying programmatically is probably different from what happens against Html <code>&lt;form&gt; POST + Action</code>. There must be some programmatic equivalent of the same thing.</p>
  
  <p><strong>P.S</strong>: I did found <a href="https://stackoverflow.com/questions/38366652/angular-2-post-form-to-external-link">this</a> similar question but sadly it has no working answer.</p>
  
  <p><strong>P.S.S</strong>: I can not use <code>window.location.href</code> or <code>RouterLink</code> as its supposed to be POST and there is supposed to be info like amount, currency and other things to be passed to the payment partner along side.</p>