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 '' 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(
          headers: {
            Authorization: "Bearer <my token>",
            "Content-Type": "application/json",
            mode: "no-cors",
      const data = await response.json();

Your help would be greatly appreciated.



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.