Node.js 从Angular/NodeJS/ExpressJS向第三方URL发布请求

选项4.2似乎是我的最佳选择。有人有其他建议吗

在以下任何一种情况下，是否有办法访问响应，或者我需要重写整个逻辑

---

我需要使用Angular Typescript（带或不带NodeJS/ExpressJS）和重定向向第三方支付提供商发送表单

流量：

问题是，在某些情况下，当我成功执行URL重定向时，我没有收到来自支付网关的任何响应当用户单击“支付”-“Plati”时，他将被重定向到成功页面

http://example.com/success

如果对页面的错误响应

http://example.com/cancel

预期情景

用户来到网站选择产品并点击购买按钮。此时，他/她被带到另一个页面，在那里他/她付款。成功付款后，用户被重定向回网站，我从服务器得到响应，并向用户显示相关消息

选项1-表单操作URL

如果我执行标准表单提交并将支付网关URL放入

[操作]=“'https://test-wallet.example.com/checkout/“

然后用户将被直接重定向到该URL，付款将被成功处理。但是，在这种情况下，我没有收到一个响应，我需要知道向用户显示什么数据-成功或错误消息

<form [action]="'https://test-wallet.example.com/checkout/'" ngNoForm method="POST" target="_blank">
      <button type="submit">Pay with card</button>
      <input name='param1' value='param1'>
      <input name='param2' value='param2'>
      <input name='param3' value='param3'>
      <input name='param4' value='param4'>
      <input name='param5' value='param5'>
      <input name='param6' value='param6'>
      <input name='param7' value='param7'>
      <input name='param8' value='param8'>
      <input name='param9' value='param9'>
</form>

我调用组件中的上一个服务：

async test(form){
  await this._myPaymentService.payFunction(form.value).subscribe(res => {
        console.log(res);
})

在这种情况下，我只收到CORS错误

选项3-jQuery AJAX

我把它叫做我的角分量

但是我也只收到了CORS错误，就像上面的例子一样。我知道在Angular应用程序中使用jQuery并不是老生常谈，但我不得不尝试

 $.ajax({
   headers: { 
     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
   },
   url : 'https://test-wallet.example.com/checkout/',
   type: "POST",
   beforeSend: function(xhrObj){
       xhrObj.setRequestHeader('Content-Type':  'application/x-www-form-urlencoded; charset=UTF-8');
   },
   dataType : "json",
   async:true,
   crossDomain:true,
   data: corvusDataObject,
   error: function () {
     alert('Ajax Error');
   },
   onFailure: function () {
     alert('Ajax Failure');
   },
   statusCode: {
     404: function() {
       alert("Ajax 404");
     }   
   },
   success : function (response) {
     alert("Success: " + JSON.stringify(response));
     }
   })
   .done(function( data ) {
   alert("Done: " + JSON.stringify(response));
});

选项4-NodeJS/ExpressJS后端

如果我使用这种方法，那么我将以与第一种情况相同的方式收到重定向。但是我的后端没有收到来自支付网关提供商的任何响应

在Angular应用程序中，我正在调用我的API：

<form [action]="'http://localhost:8080/myPaymentAPI/'" ngNoForm method="POST" target="_blank">
      <button type="submit">Pay with card</button>
      <input name='param1' value='param1'>
      <input name='param2' value='param2'>
      <input name='param3' value='param3'>
      <input name='param4' value='param4'>
      <input name='param5' value='param5'>
      <input name='param6' value='param6'>
      <input name='param7' value='param7'>
      <input name='param8' value='param8'>
      <input name='param9' value='param9'>
</form>

上面的重定向将用户传输到URL（请参见第一张图片）：

https://test-wallet.example.com/#/checkout/xxxxxxxx-xxxx-xxxx-xxxx-XXXXXXXXXX

和该URL上的用户付款，但我再次没有收到任何响应

选项4.1

fetch

返回HTML页面，但为空

选项4.2

在这种方法中，我成功地获得了URL的一个简短版本（参见第一幅图），然后将用户重定向到该URL

    app.post('/myPaymentAPI', function(req, res, next) {

      let param1 = req.body.param1;
      let param2 = req.body.param2;
      let param3 = req.body.param3;
      ...

      try{
        var body = JSON.stringify(req.body);
        const url = 'https://test-wallet.example.com/checkout/?param1='+param1+'&param2='+param2+...;
        var newData = await fetch(url, {method: "POST", body: body})
        console.log(newData.url)
        res.redirect(307, newData.url);
      }catch(error){
        console.log(error)
      }

});

此页面在307重定向后打开。消息显示“无法处理您的请求。很抱歉，发生了错误。”

在进行重定向之前，我是否需要在此步骤中再次附加FormData

选项4.3

在这种方法中，我调用API并在

res.send

中创建一个对象，然后将其发送到前端

try{
     var body = JSON.stringify(req.body);
     const url = 'https://test-wallet.example.com/checkout/?param1='+param1+'&param2='+param2+'&param3='+param3+...;
       await fetch(url, {method: "POST", body: body}).then((response) => {
         const data = response;
         res.send({
           success: true,
           redirectURL: data.url,
           body: req.body
         })
      })
       .catch((error) => {
         console.error(error);
       })
   }catch(error){
     console.log(error)
}

在前端，我成功地接收到

redirectURL

和

body

数据，并尝试进行重定向

this._myPaymentService.payFunction(form.value).subscribe(res => {
            console.log(res);
            console.log(res.redirectURL);
            window.location.replace(res.redirectURL);
})

然后，web浏览器转到下一页的空白内容

因为请求变成了GET。我知道用这种方式发送POST请求是不可能的，我正在寻找这样做的方法

---

这两种方法似乎是正确的：

• 选择1
• 选项4（使用nodejs服务器-在4.1之前，付款成功）

---

但是，有一个流似乎缺失了。支付完成后，支付API服务器向

http://example.com/success

或

http://example.com/cancel

在主体中可以找到参数。因此，您不能直接使用url在屏幕上向用户显示信息（客户端浏览器）

---

您需要做的是：

• 使用节点服务器（或者您的后端API服务器也可以工作），并使用app.post在服务器上处理url—就像您在

  app.post（'/myPaymentAPI'，）

  中所做的那样
• 更新您的数据库或从req.body等处获取相关付款详情或id
• 创建一个新的url，如

  https://yourwebsite.com/payment?status=SUCCESS&other-信息

  或

  https://yourwebsite.com/payment/id

• 将用户重定向到浏览器上的特定url
• 该特定url将具有详细信息或id。您可以显示相关详细信息或获取id，并根据需要进行API调用

---

希望能有帮助。回复任何疑问/澄清

哇，听起来你非常渴望编写代码，但确实缺乏一些基础知识。你想要一个水疗中心还是一个旧的学校表格？当然，当您尝试发送直接API请求时，会出现CORS错误

我很担心这件事的结果，因为你实际上是在处理付款问题，而且似乎对建筑不太了解——也许我错了。你听说过OWASP或CSRF吗？您是否考虑过存储事务以防发生不好的事情？您是否防止用户发送带有负数的错误请求？那怎么办

给你自己和你的用户一些安慰，在写代码之前先阅读，至少看一些例子，比如英雄的角度之旅

下面是它应该是什么样子的基本流程

后端是这里的转换器。它提供了一个API，将用户发送（验证后）的数据转换为支付提供商需要的请求。在得到结果后，它会将答案转换为对Angular应用程序的定义响应，这将是一条成功或错误消息。然后Angular应用程序可以决定要做什么：向用户显示ok或error消息

还有！你总是爱撒谎

    app.post('/myPaymentAPI', function(req, res, next) {

      let param1 = req.body.param1;
      let param2 = req.body.param2;
      let param3 = req.body.param3;
      ...

      try{
        var body = JSON.stringify(req.body);
        const url = 'https://test-wallet.example.com/checkout/?param1='+param1+'&param2='+param2+...;
        var newData = await fetch(url, {method: "POST", body: body})
        console.log(newData.url)
        res.redirect(307, newData.url);
      }catch(error){
        console.log(error)
      }

});

try{
     var body = JSON.stringify(req.body);
     const url = 'https://test-wallet.example.com/checkout/?param1='+param1+'&param2='+param2+'&param3='+param3+...;
       await fetch(url, {method: "POST", body: body}).then((response) => {
         const data = response;
         res.send({
           success: true,
           redirectURL: data.url,
           body: req.body
         })
      })
       .catch((error) => {
         console.error(error);
       })
   }catch(error){
     console.log(error)
}

this._myPaymentService.payFunction(form.value).subscribe(res => {
            console.log(res);
            console.log(res.redirectURL);
            window.location.replace(res.redirectURL);
})

app.post("http://example.com/success", function(req, res){
  //get the req.body/params here which Payment Server will post to success url
  //update your backend etc about payment status etc
  //redirect to your custom page from here https://yourwebsite.com/payment?status=success&id=id or similar
})

app.post("http://example.com/cancel", function(req, res){
  //get the req.body/params here which Payment Server will post to cancel url
  //update your backend etc about payment status etc
  //redirect to your custom page from here https://yourwebsite.com/payment?status=failure&id=id
})