Angular 4：将数据发送到外部 api

Question

我正在集成支付网关，发送数据的唯一方法是 http 发布请求。所以我问是否有可能使用角度 4 将数据发送到这个外部 api ？

我使用了这种形式：

<form [formGroup] = "form"  (ngSubmit) = "redirect(form.value)"> 
<input type="text" name="card_number" 
formControlName="card_number" >
<input type="text" name="expiry_date" formControlName="expiry_date"> 
 <input type="text" 
name="card_security_code"formControlName="card_security_code" >
<input type="submit" value="" id="submit2" name="submit"> 


</form> 

这是我的功能：

  this.form =new FormGroup ({
    card_number: new FormControl(),
    expiry_date: new FormControl(), 
    card_security_code: new FormControl()}); 


redirect= function (form) {

var body = "card_number=" + form.card_number+ "&expiry_date=" + form.expiry_date"&card_security_code=" +form.card_security_code; 
this.http.post("https://sbcheckout.payfort.com/FortAPI/paymentPage", body).subscribe((data) => {});
 }

我在 ionic 3 中尝试过这种形式，但我得到了这个 CORS 错误，请你们给点建议吗？

Failed to load https://sbcheckout.payfort.com/FortAPI/paymentPage: Redirect 
from 'https://sbcheckout.payfort.com/FortAPI/paymentPage' to 
'https://sbcheckout.payfort.com/FortAPI/paymentPageC? 
S=1&token=NAX906AB61K8IMC40AKWEKOVLJDN6D&' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. 
Origin 'http://localhost:8100' is therefore not allowed access.

Answer 1

payfort 表单应该通过 http post 提交，我在下面添加了一个示例供您查看。

  /*
  calculateSignature(form) {
    // tslint:disable-next-line: max-line-length
    const sig = `${this.PaymentSchema.sig_key}access_code=${this.PaymentSchema.access_code}language=enmerchant_identifier=${this.PaymentSchema.merchant_identifier}merchant_reference=${this.PaymentSchema.merchant_reference}return_url=${this.PaymentSchema.return_url}service_command=TOKENIZATION${this.PaymentSchema.sig_key}`;
    this.generateSha_1(sig).then(res => {
      this.PaymentSchema.signature = res;
      setTimeout(() => {
        form.submit();
      }, 2000)
    });
  }
  
    async generateSha_1(message) {
    // encode as UTF-8
    const msgBuffer = new TextEncoder().encode(message);

    // hash the message
    const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);

    // convert ArrayBuffer to Array
    const hashArray = Array.from(new Uint8Array(hashBuffer));

    // convert bytes to hex string
    const hashHex = hashArray.map(b => ('00' + b.toString(16)).slice(-2)).join('');
    return hashHex;
  }
  
  */

payfort forms should be submitted through http post 

    <form METHOD="post" ACTION="https://sbcheckout.payfort.com/FortAPI/paymentPage" #form id=form1 name=form1>

  <INPUT type="hidden" #service_command NAME="service_command" [(value)]="PaymentSchema.service_command">
  <INPUT type="hidden" #language NAME="language" [(value)]="PaymentSchema.language">
  <INPUT type="hidden" #merchant_identifier NAME="merchant_identifier" [(value)]="PaymentSchema.merchant_identifier">
  <INPUT type="hidden" #access_code NAME="access_code" [(value)]="PaymentSchema.access_code">
  <INPUT type="hidden" #signature NAME="signature" [(value)]="PaymentSchema.signature">
  <INPUT type="hidden" #return_url NAME="return_url" [(value)]="PaymentSchema.return_url">
  <INPUT type="hidden" #merchant_reference NAME="merchant_reference" [(value)]="PaymentSchema.merchant_reference">
  <INPUT type="text" #card_number NAME="card_number" [(value)]="PaymentSchema.card_number">
  <INPUT type="text" #expiry_date NAME="expiry_date" [(value)]="PaymentSchema.expiry_date">
  <INPUT type="text" #card_security_code NAME="card_security_code" [(value)]="PaymentSchema.card_security_code">
  <INPUT type="text" #card_holder_name NAME="card_holder_name" [(value)]="PaymentSchema.card_holder_name">
  <input type="submit" value="submit" id="submit2" (click)="calculateSignature(form)" name="">
</form>