被 CORS 政策阻止 - React - MangoPay

Posted 2023-03-04

【中文标题】被 CORS 政策阻止 - React - MangoPay

【英文标题】：blocked by CORS policy - React - MangoPay

【发布时间】：2021-09-17 02:06:47

【问题描述】：

我在我的 react 应用上设置 mangopay 时遇到问题。当我尝试获取特定用户的所有卡片时出现此错误：

 Access to fetch at 'https://api.sandbox.mangopay.com/v2.01/oauth/token' from origin URL 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.

 POST https://api.sandbox.mangopay.com/v2.01/oauth/token net::ERR_FAILED

我正在尝试这样做：

const listAvailableCard = () => 
        const cards = mangopay.Users.getCards(resp.UserId);
        return cards;
    

有谁知道如何解决这个问题。考虑到我已经尝试过 SSL 证书服务而不是。

谢谢。 文森特

【参考方案1】：

您看到的错误是一个安全错误，但是，它与您的请求是 http/s 无关。它被称为 CORS（跨源资源共享）错误，与阻止跨源的请求有关。即一个网站调用另一个网站来获取资源。

因此，如果您在浏览器中从 vincent.com 向 api.mangopay.com 发出请求，该请求将被阻止，因为 vincent.com 不是 Mangopay 信任的来源。

为避免此错误，最好的选择是从服务器向 Mangopay 发出请求，然后从客户端向服务器查询结果。

您可以在这些链接中阅读有关 CORS 和相关错误的更多信息：

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors

【讨论】：

我知道这一点，但根据法国有关信用卡数据传输的法律，我不能这样做。您是否有任何解决方案可以在没有 CORS 或受信任的 CORS 的情况下在前端发出此请求？

您可以尝试将 mode: 'no-cors' 添加到您的 HTTP 请求中。

不幸的是我无法这样做，因为请求是由 mangopay 模块发出的。

我怀疑这可能是您正在使用的 npm 包，npmjs.com/package/mangopay-client-react 如果您查看此文件的第 33 行，您会发现它们不支持跨源 github.com/lancygoyal/mangopay-client-react/blob/master/lib/…