angular - PayPal Rest API、firebase 函数和 Angular 6 的 CORS 错误

Question

我想使用 Paypal 为我的市场设置付款方式。我使用 Angular 6 构建我的应用程序，并使用 firebase 构建后端，使用 firebase 函数(谷歌云函数)。

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

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

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

所以这应该将我重定向到 paypal 页面以支付 amount 变量。这是发生 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 是不安全的...

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

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)