0

I'm getting cors error while uploading images with axios or fetch.

Cloudflare API return me for every request an cors error like this:

Access to XMLHttpRequest at 'https://api.cloudflare.com/client/v4/accounts/***********/images/v1' from origin 'https://dash.******.com' 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.

I have test in local environnement and prod, this will be the same error

Did one have fix this issue ?

there is some code for upload images

// This code will make an cors error
fetch(`https://api.cloudflare.com/client/v4/accounts/${process.env.cloudflare_account_id}/images/v1`, {
            method: 'POST',
            headers: {
                Authorization: `Bearer ${process.env.cloudflare_api_key}`,
                Accept: "*/*",
            },
            body: body
        }

But with this request will passing images to my next js api, the cors is not verified ? and i got an 415 error code

let headersList = {
                Accept: '*/*',
                'User-Agent': 'Thunder Client (https://www.thunderclient.com)',
                Authorization: 'Bearer *******',
            };

            let formdata = new FormData();

            formdata.append('file', new Blob(req.body.image, { type: data.files.image[0].mimetype }), data.files.image[0].originalFilename);
            console.log(data.files.image[0])
            let bodyContent = formdata;

            let reqOptions = {
                url: 'https://api.cloudflare.com/client/v4/accounts/****/images/v1 ',
                method: 'POST',
                headers: headersList,
                data: bodyContent,
            };

            let response = await axios.request(reqOptions);

Is it possible to bypass cors ? Nextjs can run curl command by passing him the binary data of file or the temporary path of file

want to upload an images to cloudflare images trought api

Jud3v
  • 191
  • 3
  • 14
  • `Is it possible to bypass cors` no, CORS is the server controlling what the client can access. If the server is yours, then you can allow/disallow CORS as you see fit. If the server is not yours you can use your server to "proxy" the request on behalf of your client – Jaromanda X Jul 01 '23 at 02:12
  • Ok thank you so i will need to proxy connection trough cloudflare worker ? – Jud3v Jul 01 '23 at 09:15
  • Absolutely no idea, that's up to you to discover – Jaromanda X Jul 01 '23 at 09:30

0 Answers0