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

Posted 2023-02-23

【中文标题】PayPal Rest API、firebase 函数和 Angular 6 出现 CORS 错误

【英文标题】：CORS error with PayPal Rest API, firebase functions and Angular 6

【发布时间】：2018-12-25 00:08:17

【问题描述】：

我想使用 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));
  

所以这应该将我重定向到支付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 发出请求，该页面正在工作）。

所以我尝试修改我的云功能代码，我补充道：

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 是不安全的......

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

【参考方案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) 通过 http 从 https 请求，反之亦然 （向http://yourapp.com请求https://yourapp.com）

【讨论】：

我明白你的意思，我想我理解这个问题。所以在我的情况下，如果我正确理解问题，我将从 localhost:4200 请求到sandbox.paypal.com/cgi-bin/…。但我不明白我应该怎么做才能让它工作？

如果你想让它工作，你必须使用localhost.com:4200而不是localhost.com:4200，如果你想创建localhost，请检查这个链接brianflove.com/2016/10/22/angular-cli-using-https

我的 api 应该位于 localhost.com 吗？我做不到啊啊啊

是的 bcoz paypal 使用 https 安全连接 我们的本地主机使用非安全连接我的意思是 http

我按照教程将浏览器连接到localhost:4200，但我总是以同样的错误结束...

【参考方案2】：

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

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

我发送链接并通过 Angular 应用程序直接访问该链接：

功能代码（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;
     );