1

I am trying to get image data uri through image url using the function below, however, I kept getting a cross origin error even though the image is stored in the localhost folder. Can anyone help me with this?

var img = new Image();
            img.crossOrigin = 'Anonymous';
            img.onload = function () {
                var canvas = document.createElement('CANVAS');
                var ctx = canvas.getContext('2d');
                var dataURL;
                canvas.height = this.naturalHeight;
                canvas.width = this.naturalWidth;
                ctx.drawImage(this, 0, 0);
                dataURL = canvas.toDataURL(outputFormat);
                var imageAttribute = {
                    dataUrl: dataURL,
                    height: canvas.height,
                    width: canvas.width
                };
                if (callback) callback(imageAttribute, options);
            };
            img.src = url;
            console.log(img.src);

The code throws cross origin issue on the line img.src = url as it tries to hit my localhost url. Below is the error that is shown in the console.

Access to image at 'https://localhost:44377//Data/files/logo-rs.png' from origin 'https://localhost:44376' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

aswin putra
  • 117
  • 9
  • I found the answer - [possible solutions](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) – damirqasha Jun 17 '21 at 05:01
  • Your image URL has a different port number, and so is [considered to be from a different origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#definition_of_an_origin). – JosephDaSilva Jun 17 '21 at 05:04

1 Answers1

1

An origin is a domain, plus a scheme and port number.

you use two different port 44376 and 44377

44376 only access to 44377 when on the header of 44377 response was something like this

Access-Control-Allow-Origin: https://localhost:44376

and how to add this header to your responses, it depends on your server

you can see Apache, IIS6, IIS7, PHP and ASP.NET in

https://www.aurigma.com/docs/us8/enabling-cross-origin-resource-sharing.htm

NodeJS in

How to enable cross-origin resource sharing (CORS) in the express.js framework on node.js

XAMPP in

How do I enable cross-origin resource sharing on XAMPP?

Good luck ☺

AliReza
  • 106
  • 1
  • 7
  • Do you know how to add access-control-allow-origin with a condition of file extension. For example, only allow .jpeg/.gif/.png file to have the access-control-allow-origin – aswin putra Jun 17 '21 at 05:43
  • This is for Apache : [Allowing cross-origin use of images and canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#web_server_configuration) This if for IIs : [Enabling CORS on IIS for only Font files](https://stackoverflow.com/questions/39647732/enabling-cors-on-iis-for-only-font-files) but you need to replace regex with this **pattern = "^[^\?]+\.(jpg|jpeg|gif|png)$"** – AliReza Jun 17 '21 at 19:14