Using fetch() to request images info

I am working on a React Project and I want to request the images data from the Cloudflare API using JS fetch(). If I use Postman I get the response without a problem, but if I use fetch() inside my project I get the following error:

Access to fetch at 'https://api.cloudflare.com/client/v4/accounts/0cffae522cdd52172bbe596db41d0f8a/images/v1?page=1&per_page=50' from origin 'http://localhost:3000' 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.

The fetch request is as follows:

const fetchData = async () => {
      const response = await fetch(
        "https://api.cloudflare.com/client/v4/accounts/<my_account>/v1?page=1&per_page=50",
        {
          headers: {
            Authorization: "Bearer <my token>",
            "Content-Type": "application/json",
            mode: "no-cors",
          },
        }
      );
      const data = await response.json();

Your help would be greatly appreciated.

Regards,

Eduardo

We do not allow API calls client-side. You’re currently leaking your API token to all visitors, this is not good!

Please move this server-side and rotate your token :slight_smile:

1 Like

You won’t be able to make this request client-side from your project due to no Access-Control-Allow-Origin on the Cloudflare API - nor would you want to, in case your API credentials are exposed.

You will want to do it server-side, or use some kind of CORS proxy if this is solely a project you’re running localhost and never something anyone else has access to.

EDIT: @WalshyMVP beat me to it.

1 Like

How can I edit my message to removed the leaked token?

I deleted the token, thx for the warning. Cheers

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.