Angular Post 到外部服務器，在 iframe 中顯示結果

Question

所以我將我的 angular 應用程序集成到支付網關中，在某些情況下，支付處理器需要額外的安全檢查。 對於任何感興趣的人，它是一個3D 安全實現。

我可以毫無問題地執行發布請求，但是我的提供者返回的值只是......

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

我希望它會返回完整的 html，我可以在模態中呈現，沒有這樣的運氣。

所以我試圖創建一個 iframe 來發布和處理這個（就像過去的學校時代一樣），但我無法讓它工作。 到目前為止我的代碼...

成分

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 只是呈現“無法確定請求”

如果我在郵遞員中手動執行 POST 請求，則會呈現正確的 HTML，但來自我在控制台中的 httpPOST 的響應僅顯示重定向。

所以我的問題是，如何在 iframe 中實現這一點並呈現正確的響應？

編輯：這個問題對我有所幫助

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 中顯示結果

問題描述

1 個解決方案

解決方案1
1 已采納 2020-04-02 12:20:32

Angular Post 到外部服務器，在 iframe 中顯示結果

問題描述

1 個解決方案

解決方案1 1 已采納 2020-04-02 12:20:32

解決方案1
1 已采納 2020-04-02 12:20:32