首页 文章

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

提问于
浏览 次
1

我想用Paypal为我的市场设置付款 . 我用Angular 6构建我的应用程序，使用firebase构建我的应用程序，使用firebase功能（谷歌 Cloud 功能） .

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

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

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

因此，这应该将我重定向到paypal页面以支付 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 Headers 'Access-Control-Allow-Origin'） . 跨源请求已阻止：同源策略禁止在https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-54G25913XT5841335上读取远程资源 . （原因：CORS请求未成功） .

此外，起源：真是不安全的......

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

angular firebase paypal cors angular6

2 回答

  • 1

    To be clear, this is not an Angular error. It afflicts all web apps equally, and most of the fixes we’ll look at below are actually modifying the server or the browser.

    您违反了同源策略 - 它说每个AJAX请求必须与您站点的确切主机，协议和端口匹配 . 可能导致此问题的原因：从本地提供的文件（从文件：///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，反之亦然（从http请求https://yourapp.com ：//yourapp.com）

    回复于
  • 0

    在WebApp中处理CORS错误很复杂，特别是如果您无法访问正在使用的API代码 . 所以我改变了一点服务器的机制，而不是在我触发支付功能后获得302重定向到paypal页面

    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;
     });
   }
    回复于

相关问题