由于跨源，无法从本地主机 url 加载图像

Question

我正在尝试使用下面的函数通过图像 url 获取图像数据 uri，但是，即使图像存储在 localhost 文件夹中，我仍然收到跨源错误。谁能帮我解决这个问题？

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);

代码在行 img.src = url 上抛出跨源问题，因为它试图访问我的本地主机 url。以下是控制台中显示的错误。

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.

Answer 1

来源是域加上方案和端口号。

您使用了两个不同的端口 44376 和 44377

44376 仅在 44377 的 header 上访问 44377 响应是这样的

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

以及如何将此 header 添加到您的回复中，这取决于您的服务器

您可以在

中看到Apache、IIS6、IIS7、PHP和ASP.NET

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

NodeJS 在

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

XAMPP 在

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

祝你好运☺

由于跨源，无法从本地主机 url 加载图像

Unable to load image from localhost url because of cross origin

javascript

cross-domain

html5-canvas