Angular Post 到外部服务器，在 iframe 中显示结果

Question

所以我将我的 angular 应用程序集成到支付网关中，在某些情况下，支付处理器需要进行额外的安全检查。对于任何感兴趣的人，它是一个 3D Secure 实现。

我可以毫无问题地执行 post 请求，但是 return 从我的提供者那里得到的值只是....

<html>
    <head>
        <title>Redirecting...</title>

我希望它 return 完整 html 我可以在模态中渲染，但没有这样的运气。

所以我尝试创建一个 iframe post 并处理它（就像以前的学生时代一样），但我无法让它工作。到目前为止我的代码...

组件

export class CheckoutComponent implements OnInit {
    @ViewChild('form') postForm: ElementRef;
    private MD: any;
    private PaReq: any;
    private TermUrl: any;
    private demoEndpoint: any;
    @ViewChild('threedsModal', { static: true }) private threedsModal;
    constructor(
        private http: HttpClient,
        ) { }

    ngOnInit(): void {
        this.demoEndpoint = 'www.example.com/post/'
        this.MD = 'foo';
        this.PaReq = 'bar';
        this.TermUrl = 'www.myexample.com/response';


    }
    onLoad() {
        console.log('onLoad triggered.');
    }
   // Called from another part of the code when we need to perform the POST
    submitForm(){

        // values are custom encoded, not needed to show for example
        const myParams = new HttpParams({encoder: new HttpUrlEncodingCodec()})
            .set('MD', this.MD)
            .set('PaReq', this.PaReq)
            .set('TermUrl', this.TermUrl);
        this.http.post(this.demoEndpoint, myParams, {responseType: 'text'}).subscribe(x => console.log(x));

        return true;
    }

}

然后在我的模板中：

 <iframe class="custom-frame" #frame width="400" height="400" id="frame" name="frame" 
          frameborder="0" [src]="demoEndpoint | safeResourceUrl" (load)="onLoad()"></iframe>

<form target="frame" action="demoEndpoint| safeResourceUrl" #form method="POST">
    <input type="hidden" name="MD" value={{MD}} id="MD" />
    <input type="hidden" name="PaReq" value={{PaReq}} id="PaReq" />
    <input type="hidden" name="TermUrl" value={{TermUrl}} id="TermUrl" />
</form>

但是这个 iframe 只是呈现 "Unable to determine the request"

如果我在 postman 中手动执行 POST 请求，则呈现正确的 HTML，但我的 httpPOST 在控制台中的响应只显示 Re -导演。

所以我的问题是，如何在 iframe 中实现这一点并呈现正确的响应？

编辑：This question 对我有所帮助

Answer 1

因此，对于以后任何人的帮助，使用

都相当容易

  // create a form for the post request
  const form = window.document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', 'http://post.example.com');
  // use _self to redirect in same tab, _blank to open in new tab
  // form.setAttribute('target', '_blank');
  form.setAttribute('target', 'threedframe');

  // Add all the data to be posted as Hidden elements
  form.appendChild(this.createHiddenElement('MD', 'foo'));
  form.appendChild(this.createHiddenElement('PaReq', 'bar'));
  form.appendChild(this.createHiddenElement('TermUrl','https://dump.example.com'));
  console.log(form);
  window.document.body.appendChild(form);
  form.submit();

  // create the form
  private createHiddenElement(name: string, value: string): HTMLInputElement {
    const hiddenField = document.createElement('input');
    hiddenField.setAttribute('name', name);
    hiddenField.setAttribute('value', value);
    hiddenField.setAttribute('type', 'hidden');
    return hiddenField;
  }

然后在我的模板中设置一个 iframe：

 <iframe class="custom-frame" id="three-d-frame"  width="430" height="450" frameborder="0" name="threedframe">

Angular Post 到外部服务器，在 iframe 中显示结果

Angular Post to external server, display results in iframe

javascript

angular

angular-httpclient