因此，我将我的 Angular 应用程序集成到支付网关中，在某些情况下，支付处理器需要进行额外的安全检查。对于任何感兴趣的人来说，它是 3D Secure实现。
我可以毫无问题地执行发布请求，但从我的提供商返回的值很简单......
<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 只是呈现“无法确定请求”
如果我在 postman 中手动执行 POST 请求，则会呈现正确的 HTML，但控制台中 httpPOST 的响应仅显示重定向。
所以我的问题是，如何在 iframe 中实现此目的并呈现正确的响应？
编辑:This question对我有所帮助
最佳答案
因此，为了将来任何人的帮助，使用help of this answer这相当容易。
// 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">
关于javascript - Angular Post 到外部服务器，在 iframe 中显示结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60974174/