在角度组件内接收POST数据

Question

我正在 Angular 版本 7 中集成支付网关。

支付网关需要输入如下数据

requestParameter : MerchantId||CollaboratorID||Encrypted_string

我尝试使用 ngForm 提交表单，如下所示，但我的请求未发布到支付网关 url，并收到错误 404 not found for "http://localhost:4200/directPayment/" 和支付网关的会话过期消息对此的回应。就像如果请求中出现任何问题，您会收到会话过期消息一样。

<form  (ngSubmit)="onSubmit()" method="POST" mt-3>

在代码后面，我根据需要传递参数并进行 http.post 调用，如下所示。单击 OnSubmit 后，我使用加密字符串调用了 formSubmit

formSubmit( encryptedString) {
const formData = new FormData();
formData.append( 'requestParameter', encryptedString);

this.http.post('direcPayment/', formData, httpFormDataOptions)
    .subscribe((resposne) => {
      console.log(resposne);
    });

}

在“httpFormDataOptions”内我添加了以下标题

const httpFormDataOptions = {
  headers: new HttpHeaders(),
};
httpFormDataOptions.headers.append('Access-Control-Allow-Origin', '*');
httpFormDataOptions.headers.append('Access-Control-Allow-Methods', 'DELETE, POST, GET, OPTIONS');
httpFormDataOptions.headers.append('Access-Control-Allow-Headers', 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');

/directPayment 指的是我的 Proxy.config.json 文件，如下

{
  "/direcPayment": {
  "target": "PaymentGatewayURL",
  "secure": true,
  "pathRewrite": {"^/direcPayment" : ""},
  "changeOrigin": true
  },
}

所以目前我使用 ngNoForm 并使用 action 属性提交表单。

所以我想问两个问题

1. 使用 httpClient POST 方法将表单提交到支付网关链接

2. 支付网关说，如果支付成功/失败，那么他们将以加密格式的POST数据重定向到成功/失败的URL，那么如何以角度接收数据到特定的URL呢？如果有人在这两种情况下使用 httpClient Call 或 ngNoForm

调用我的 Angular URL，有什么方法可以接收数据

谢谢。

Answer 1

您的代码：

this.http.post('direcPayment/', formData, httpFormDataOptions)
    .subscribe((resposne) => {
      console.log(resposne);
    });
}

所以post数据会提交到

http://localhost:4200/direcPayment/

，你应该把你的支付网关的URL放在这里

Answer 2

假设您的应用程序有一个服务器端后端，您可能应该从后端处理整个事务。

如果你根本没有后端，我没有建议。我想不出任何安全的方法来完全在客户端执行此操作。

Answer 3

您应该定义一个 API

Post

端点，该端点将接收付款有效负载响应并将重定向到您所需的前端页面。

.NET 示例如下：

[HttpPost("api/payment-done"]
public IActionResult PaymentDone([FromBody] PaymentPayload request)
{
   //do stuff with payload
   return Redirect("http://your-website-page");
}