Question

我在 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 认证服务，但没有尝试过。

谢谢。文森特

Answer 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 政策阻止 - React - MangoPay

1 个答案: