CORS 错误与 PayPal Rest API、firebase 函数和 Angular 6

Question

我想使用 Paypal 为我的市场设置付款方式。我使用 Angular 6 构建我的应用程序，使用 firebase 构建后端，使用 firebase 函数（google 云函数）。

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

在我的前端应用程序中，我获得了触发付款方式的功能：

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

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

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://us-central1-project.cloudfunctions.net/pay (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://us-central1-project.cloudfunctions.net/pay. (Reason: CORS request did not succeed).

如果我错了请纠正我，但这个错误是因为我试图通过 localhost:4200 使用我的 IP 访问此页面。（请注意，如果我手动向 https://us-central1-cop-room-host.cloudfunctions.net/pay 发出请求，该页面正在运行）。

所以我尝试修改我的云功能代码，我添加：

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

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

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-54G25913XT5841335. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-54G25913XT5841335. (Reason: CORS request did not succeed).

此外，origin:true是不安全的...

如何配置此付款方式以使其与 angular6 一起使用？

Answer 1

需要说明的是，这不是 Angular 错误。它同样影响所有网络应用程序，我们将在下面看到的大多数修复实际上是在修改服务器或浏览器。

You’ve run a foul of the Same Origin Policy – it says that every AJAX request must match the exact host, protocol, and port of your site. Things that might cause this:

Hitting a server from a locally-served file (a request from file:///YourApp/index.html to http://api.awesome.com) Hitting an external API (a request from http://yourapp.com to http://api.awesome.com). Hitting an internal API (a request from http://yourapp.com to http://api.yourapp.com). Hitting a different port on the same host (webapp is on http://localhost:3000, API is http://localhost:4000) Requesting over http from https or vice-versa (requesting https://yourapp.com from http://yourapp.com)

Answer 2

CORS 错误在 webApps 中处理起来很复杂，尤其是当您无权访问您正在使用的 API 代码时。所以我改变了一些服务器的机制，而不是在我触发支付功能后获得 302 重定向到 paypal 页面

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

我发送 link 并通过 angular 应用程序直接访问 link：

函数代码(index.ts):

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

Web 应用程序组件代码：

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;
     });
   }

CORS 错误与 PayPal Rest API、firebase 函数和 Angular 6

CORS error with PayPal Rest API, firebase functions and Angular 6

paypal

cors

firebase

angular

angular6