blocked by CORS policy - React - MangoPay

Question

I'm having troubles with setting up mangopay on my react App. I'm getting this error when i try to fetch all cards of a specific user :

 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

I'm trying to do to it as so:

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

Does anyone know how to solve this issue. Considering that i already tried on both SSL certificated serve and not.

Thank you. Vincent

Answer 1

The error you're seeing is a security error, however, it's not related to your request being http/s. Its known as a CORS (Cross-Origin Resource Sharing) error and has to do with blocking requests that go across origins. i.e one website calling on another website for resources.

So if you make your request in the browser from vincent.com to api.mangopay.com the request will be blocked because vincent.com isn't an origin that Mangopay trusts.

To avoid this error the best option is to make the requests to Mangopay from a server and then query your server from your client for the results.

You can read more about CORS and the related errors at these links:

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

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