使用Node.js+AngularJS+PayPal SDK支付时遇CORS错误求助

你遇到的CORS错误核心原因是错误地在AJAX请求中使用了后端重定向。

当你用AngularJS的$http.post发起AJAX请求时，浏览器会在后台静默处理这个请求，而非像普通页面跳转那样响应重定向指令。你的后端用res.redirect(payment.links[i].href)试图跳转到PayPal的授权页面，但浏览器不会自动执行这个跳转——它会把PayPal授权页面的内容当作AJAX响应来接收。而PayPal的页面根本没有配置允许http://localhost的CORS响应头，所以直接触发了跨域错误。

另外，你在PayPal SDK配置里添加的CORS头完全多余，那是SDK发送请求给PayPal时的请求头，和PayPal返回给你的页面无关，对解决问题没有帮助。

正确的做法是：后端创建支付后，把PayPal的授权URL返回给前端，由前端主动跳转到这个URL。

1. 修改Node.js路由代码 #

把原来的res.redirect改成返回JSON格式的授权URL：

router.post('/pay', (req, res) => {
  const create_payment_json = {
    "intent": "sale",
    "payer": {
      "payment_method": "paypal"
    },
    "redirect_urls": {
      "return_url": "http://localhost/paypal/success",
      "cancel_url": "http://localhost/paypal/cancel"
    },
    "transactions": [{
      "item_list": {
        "items": [{
          "name": "Red Sox Hat",
          "sku": "001",
          "price": "25.00",
          "currency": "BRL",
          "quantity": 1
        }]
      },
      "amount": {
        "currency": "BRL",
        "total": "25.00"
      },
      "description": "Hat for the best team ever"
    }]
  };

  paypal.payment.create(create_payment_json, function (error, payment) {
    if (error) {
      // 错误处理：返回错误信息给前端
      return res.status(500).json({ error: error.message });
    } else {
      // 找到授权URL并返回给前端
      const approvalUrl = payment.links.find(link => link.rel === 'approval_url').href;
      res.json({ approvalUrl: approvalUrl });
    }
  });
});

2. 修改AngularJS前端代码 #

在$http.post的回调中，拿到授权URL后，用$window跳转到PayPal页面：

// 记得在控制器中注入$window服务
app.controller('PaymentController', ['$http', '$window', function($http, $window) {
  this.initPayment = function(cart) {
    $http.post('/paypal/pay', cart)
      .then(function(response) {
        // 跳转到PayPal授权页面
        $window.location.href = response.data.approvalUrl;
      })
      .catch(function(error) {
        console.error('创建支付失败:', error);
        // 这里可以添加用户友好的错误提示，比如弹出对话框
      });
  };
}]);

额外优化建议 #

• 删除PayPal SDK配置里的CORS头，那部分完全没用。
• 确保你的return_url和cancel_url对应后端已配置的路由，用于处理支付完成/取消后的逻辑。

内容的提问来源于stack exchange，提问作者Luiz Alves