Download Image Using Fetch In ReactJs

Question

I'm trying to download an image using fetch in reactJS. But whenever I call the function, I face the CORS error.

            var image_trade_license = new Image();
            image_trade_license.crossOrigin = "anonymous";
            image_trade_license.src = "https://via.placeholder.com/150/92c952";
            // get file name - you might need to modify this if your image url doesn't contain a file extension otherwise you can set the file name manually
            var fileName_trade_license = 'trade_license';
            image_trade_license.onload = function () {
                var canvas = document.createElement('canvas');
                canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
                canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
                canvas.getContext('2d').drawImage(this, 0, 0);
                var blob_trade_license;
                // ... get as Data URI
                if (image_trade_license.src.indexOf(".jpg") > -1) {
                blob_trade_license = canvas.toDataURL("image_trade_license/jpeg");
                } else if (image_trade_license.src.indexOf(".png") > -1) {
                blob_trade_license = canvas.toDataURL("image_trade_license/png");
                } else if (image_trade_license.src.indexOf(".gif") > -1) {
                blob_trade_license = canvas.toDataURL("image_trade_license/gif");
                } else {
                blob_trade_license = canvas.toDataURL("image_trade_license/png");
                }
                $("#image1").append("<a download='" + fileName_trade_license + "' href='" + blob_trade_license + "'><button>Download Trade License</button></a>");
            }

and I am facing this error (occured in browser Console) -

Access to image at 'https://via.placeholder.com/150/92c952' from origin 
'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control- 
Allow-Origin' header is present on the requested resource.
via.placeholder.com/150/92c952:1 Failed to load resource: net::ERR_FAILED

Refer this answer https://stackoverflow.com/questions/58077982/cors-preflight-request-not-handled-by-external-api/58078124#58078124 — James, Nov 26 '19 at 07:14
try to do smth like that `fetch('https://via.placeholder.com/150/92c952', {method: 'GET', mode: 'no-cors'}).then(resp => console.log('test'))` — Aliaksei Bulhak, Nov 26 '19 at 07:16
Cors error is usually the issue of back-end. Please ask your back-end developer to insert cors code. For express.js back-end, you can refer to this page: https://expressjs.com/en/resources/middleware/cors.html — TopW3, Nov 26 '19 at 07:44
@AlekseiBulgak I tried this but I am still not getting proper output. — Mrigank Shekhar Shringi, Nov 26 '19 at 08:05

score 0 · Answer 1 · answered Nov 26 '19 at 07:18

First, Have you ever set mode: "no-cors" in fetch config? Like this:

fetch('https://via.placeholder.com/150/92c952', {
      method: 'POST',
      mode: "no-cors"
})

If you still receive CORS error. You can disable origin policy in Chrome to continue to call API that without CORS error with This Post

Or, This post could give you more knowledge about CORS in Web Browser.

Download Image Using Fetch In ReactJs

1 Answers1