JavaScript集成PayPal支付时POST请求遭CORS拦截问题求助

问题详情 #

尝试在JavaScript应用中集成PayPal支付功能，测试订单处理流程时，createOrder函数发送POST请求到PayPal沙箱API时触发CORS错误：

Access to fetch at 'https://api-m.sandbox.paypal.com/create-paypal-order' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

相关代码：

createOrder(data, actions) {
    // Order is created on the server and the order id is returned
    return fetch("https://api-m.sandbox.paypal.com/create-paypal-order", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        // use the "body" param to optionally pass additional order information
        // like product skus and quantities
        body: JSON.stringify({
            orderID: data.orderID
        }),
    })
    .then((response) => response.json())
    .then((order) => order.id);
}

解决方案 #

• 禁止前端直接调用PayPal API：PayPal的REST API不允许前端浏览器直接发起请求（会触发CORS限制），必须通过你的后端服务器中转所有PayPal API请求。前端只需要和自己的后端接口交互，由后端负责和PayPal通信。

• 调整前后端代码逻辑：

  1. 后端新增一个接口（比如/api/create-paypal-order），在这个接口内部完成PayPal订单的创建逻辑，包括获取访问令牌、调用PayPal官方订单接口。
  2. 前端的createOrder函数改为请求自己的后端接口：

     createOrder(data, actions) {
         return fetch("/api/create-paypal-order", {
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
             },
             body: JSON.stringify({
                 orderID: data.orderID
             }),
         })
         .then((response) => response.json())
         .then((order) => order.id);
     }
     

• 后端请求PayPal的示例代码（Node.js/Express）：

  const axios = require('axios');
  const express = require('express');
  const app = express();
  app.use(express.json());
  
  app.post('/api/create-paypal-order', async (req, res) => {
      try {
          // 1. 获取PayPal访问令牌
          const authResp = await axios.post(
              'https://api-m.sandbox.paypal.com/v1/oauth2/token',
              'grant_type=client_credentials',
              {
                  auth: {
                      username: '你的沙箱Client ID',
                      password: '你的沙箱Secret'
                  }
              }
          );
          const accessToken = authResp.data.access_token;
  
          // 2. 创建PayPal订单
          const orderResp = await axios.post(
              'https://api-m.sandbox.paypal.com/v2/checkout/orders',
              {
                  intent: 'CAPTURE',
                  purchase_units: [
                      {
                          amount: {
                              currency_code: 'USD',
                              value: '10.00' // 替换为实际订单金额
                          }
                      }
                  ]
              },
              {
                  headers: {
                      'Authorization': `Bearer ${accessToken}`,
                      'Content-Type': 'application/json'
                  }
              }
          );
  
          res.json({ id: orderResp.data.id });
      } catch (err) {
          console.error(err);
          res.status(500).json({ error: '订单创建失败' });
      }
  });
  
  app.listen(3000, () => console.log('后端服务运行在3000端口'));
  

• 关键注意事项：

  • 绝对不要在前端代码中暴露PayPal的Client ID和Secret，必须存放在后端环境变量中。
  • 你之前调用的/create-paypal-order不是PayPal的官方端点，正确的订单创建端点是/v2/checkout/orders。
  • 沙箱环境和生产环境的API地址要区分开，测试阶段务必使用沙箱地址。

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