Question

我想通过Paypal为我的市场设置付款。我使用firebase函数（谷歌云函数）使用Angular 6构建应用程序，并使用firebase构建后端。

我使用了这个Paypal firebase function示例来构建我的Firebase后端。

在我的frontEnd应用程序中，我具有此功能来触发付款方式：

processPayment() {
    this.http.post('https://us-central1-project.cloudfunctions.net/pay', {price: this.amount })
      .subscribe(res => console.log(res));
  }

因此，这应该将我重定向到贝宝页面以支付amount变量。这是发生CORS错误的地方，当我触发该函数时，最终在控制台中出现此错误：

跨域请求被阻止：“同源策略”不允许读取https://us-central1-project.cloudfunctions.net/pay处的远程资源（原因：CORS标头“ Access-Control-Allow-Origin”丢失）。跨域请求被阻止：同源策略禁止读取https://us-central1-project.cloudfunctions.net/pay处的远程资源。（原因：CORS请求未成功。）

如果我输入错误，请更正我，但是此错误来自以下事实：我正尝试通过localhost：4200用IP访问此页面。（请注意，如果我手动向https://us-central1-cop-room-host.cloudfunctions.net/pay发出请求，则该页面将正常工作。）

所以我尝试修改我的Cloud函数代码，我添加了：

const cors = require('cors')({
  origin: true,
});

但是，我最终在控制台中遇到此错误：

跨域请求被阻止：“同源起源”策略禁止读取https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-54G25913XT5841335处的远程资源。（原因：CORS标头“ Access-Control-Allow-Origin”缺失）。跨域请求被阻止：同源策略禁止读取https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-54G25913XT5841335处的远程资源。（原因：CORS请求未成功。）

此外，origin：true不安全...

如何配置此付款方式以使其与角度6兼容？

Answer 1

请注意，这不是Angular错误。它会同等地折磨所有网络应用程序，下面我们将介绍的大多数修复程序实际上都是在修改服务器或浏览器。

您违反了同源政策-它说每个AJAX   请求必须与您的站点的确切主机，协议和端口匹配。   可能导致这种情况的原因：

从本地提供的文件中命中服务器（来自   file：///YourApp/index.html到http://api.awesome.com）   外部API（来自http://yourapp.com的请求   http://api.awesome.com）。达到内部API（来自   http://yourapp.com至http://api.yourapp.com）。打不同   同一主机上的端口（webapp位于http://localhost:3000上，API为   http://localhost:4000）从https请求HTTP，反之亦然   （从https://yourapp.com请求http://yourapp.com）

Answer 2

CORS错误在webApp中处理起来很复杂，尤其是如果您无法访问所使用的API代码时。因此，我更改了服务器的机制，而不是在触发支付功能后获得302重定向到贝宝页面

res.redirect(302, links.approval_url.href);

我发送链接，然后直接访问角度应用程序访问链接：

功能代码（index.ts）：

res.status(200).send(JSON.stringify(links['approval_url'].href));

Web App组件代码：

processPayment() {
   this.http.post('https://us-central1-cop-room-host.cloudfunctions.net/pay', {price: this.amount })
     .subscribe(res => {
       console.log(res);
       document.location.href = res;
     });
   }

PayPal Rest API，firebase函数和Angular 6的CORS错误

2 个答案: