cors - 处理 Adyen Web Drop-In 的 CORS 错误/无效客户端 key

Question

我正在尝试实现端到端的概念验证来练习 Adyen's Web Drop-In .大致上，这涉及三个步骤，如该 URL 所示，但为方便起见在此处重复:

1. 创建付款 session
2. 设置 Drop-in
3. 获取付款结果

第一步在服务器端完成， session 数据返回给浏览器。那部分工作正常。第 2 步必须在浏览器中完成，因为它需要 DOM，这(自然)是 CORS 问题出现的地方。这是有问题的代码:

      const configuration = {
        environment: "test",
        clientKey: "test_APV***...",
        session: {
          id: uuidv4(),
          sessionData: "Ab02b4c0!BQABAgBdJVhguRV6hEN..."
        },
        onPaymentCompleted: (result, component) => {
            console.info(result, component);
        },
        onError: (error, component) => {
            console.error(error.name, error.message, error.stack, component);
        }
      };

      AdyenCheckout(configuration)
      .then(checkout => {
        const dropinComponent = checkout.create('dropin').mount('#dropin-container');
      })
      .catch(error => {
        console.error('Creating Adyen Checkout: ', error.message)
      })
    }

行 AdyenCheckout(configuration) 失败，将执行线程放入 onError 处理程序。在浏览器控制台中可以看到两个错误:

1. 一个标准的 CORS 错误，来自 Adyen 的 javascript 库的深处
2. NETWORK_ERROR:错误:无效的客户端 key

Adyen's documentation允许像这样嵌入 JS

<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.10.0/adyen.js"
     integrity="sha384-LoKEanRPljHoEsT5o+grBn8hgVzoPevwGvRd+gOp/2Xgc4Jx2FQkx29092SKDdeY"
     crossorigin="anonymous"></script>

我的理解是“完整性”和“跨源”属性允许跨域请求……但这似乎不起作用。

“无效的 ClientKey”错误也令人费解:我确定我使用的 ClientKey 是有效的，并且与我用来生成 session 数据的 API key 关联的是同一个。

希望有人有使用 Adyen 的 Web Drop-In 的经验，并且可以阐明我做错了什么。如果我自己解决了这个问题，我会报告。

Answer 1

最有可能发生的情况是您没有将应用程序的 URL 添加到您凭据的“允许来源”列表中。

您可以转到 the customer area 的开发人员 -> API 凭据页面来执行此操作，在那里选择正确的凭证并添加一个新的“允许的来源”。

这应该可以解决您的 CORS 问题