被 CORS 政策阻止 - React - MangoPay

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