Angular 6 使用 POST 重定向到外部 url [英] Angular 6 Redirect to external url using POST

问题描述

我正在尝试将支付网关合并到 Angular 应用程序中，我发现以下付款合作伙伴提供的 JavaScript 代码段用于合并，我通过添加 ngNoForm 并让它与 angular 一起工作；stackBlitz

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 ngNoForm and got it working with angular; stackBlitz

<form ngNoForm method="post" action="https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp">
<input type="hidden" name="amount" value="1" >
<input type="hidden" name="currCode" value="608" >
<input type="hidden" name="payMethod" value="CC">
<input type="submit" name="submit">
</form>

Next 而不是使用 HTML

POST + Action 直接从组件模板，我想对我的后端服务器进行 REST 调用，执行其他一些步骤并将该 API 响应映射到我的支付合作伙伴期望的内容，然后使用 HttpClient POST 重定向到我的支付合作伙伴这应该会做同样的事情并重定向到应该负责支付过程的支付合作伙伴网站，所以简而言之，我想以编程方式实现同​​样的事情，我尝试了:

Next instead of using HTML <Form> POST + Action 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:

redirectToPaymentHandler(): Observable<any> {
  const urlEncodeData = 'amount=1&currCode=608&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) => {
      console.log(error)
      return EMPTY;
    }));
}

最初我遇到了 CORS 问题，但我能够使用 Angular CLI 的代理配置绕过该问题，现在发生的情况是，HttpClient 的 POST 方法实际上将网页作为字符串返回，而不是重定向到支付合作伙伴的网站 来自服务端点，这不是我想的那样，

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 returns the web page as a string from the service endpoint, which is not what I though it would do,

请参阅此stackBlitz，以进一步了解.

Kindly refer to this stackBlitz, for further understanding.

总而言之，基本上我正在寻求将上述工作模板驱动的 POST 请求转换为程序化版本.所以我可以先执行一些操作，然后使用 POST 重定向到外部 URL.我相信我以编程方式尝试的可能与针对 Html <form> 发生的事情不同.POST + 操作.必须有一些程序化的等价物.

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 <form> POST + Action. There must be some programmatic equivalent of the same thing.

PS:我确实找到了这个 类似的问题，但遗憾的是它没有有效的答案.

P.S: I did found this similar question but sadly it has no working answer.

PSS:我不能使用 window.location.href 或 RouterLink 作为它应该是 POST 并且应该有信息例如金额、货币和其他要一起传递给付款合作伙伴的内容.

P.S.S: I can not use window.location.href or RouterLink 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.

推荐答案

鉴于这种情况，我们可以通过使用纯 JavaScript 而不是 HttpClient 提交动态创建的表单来实现所需的输出.当我们使用 HttpClient 时，重定向发生在网络中，而不是在客户端浏览器中.这是我的解决方案

Given the scenario we can achieve the desired output by submitting a dynamically created form by using plain JavaScript instead of HttpClient. When we use HttpClient, redirection occurs in the network and not in the client browser. Here is my solution

const myform = document.createElement('form');
myform.method = 'POST';
myform.action = "https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp";
myform.style.display = 'none';
myform.append('Content-Type', 'application/x-www-form-urlencoded');
myform.append('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8');
document.body.appendChild(myform);
myform.submit();

这篇关于Angular 6 使用 POST 重定向到外部 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！