Javascript 使用fabric.fromUrl时出现CORS问题

我正在将fabricjs与angularjs应用程序集成。我正在从第三方来源（不在我的控制范围内）提取图像。我希望对它执行一些操作，比如：过滤、添加到画布、存储到画布以及从画布重新加载

我正在对crossorigin使用fabric fromurl调用，但每次都失败

 fabric.Image.fromURL('http://img.fkcdn.com/image/dining-chair/b/g/y/fidcbennywncsach-1-cedar-pine-devdar-home-cherry-white-original-imae9fsfbkxrgebt.jpeg', function (img) {
    canvas1.add(img.set({
        left: 50,
        top: 50,
        angle: 30
    }));
    console.log('CORS enabled + crossOrigin property - DataURL: ', canvas1.toDataURL());
}, {
    crossOrigin: 'Anonymous'
});

---

有什么我做错了吗？

crossOrigin

只会请求通过CORS使用资源的权限，但服务器可以拒绝它，在这种情况下，加载映像也会一起失败

---

唯一的解决方法是将映像上载到您自己的服务器（不需要

crossOrigin

），或者使用CORS代理（

crossOrigin

仍然需要），或者将映像上载到允许使用CORS的主机（imgur.com和dropbox.com是两个示例）。所有这些解决方法都可能涉及用户权限问题。

Fabricjs代码片段

 fabric.util.loadImage(img.src, function(any image url on website) {
    var object = new fabric.Image(any image url on website);
    object.set({
      id: 'bg',
      width: 100,
      height: 100,
      left: 20,
      top: 30
    });
    canvas.add(object);

  }, null, {
    crossOrigin: 'anonymous'
  })

避免fabricjs中的Cors问题

1：使用

fabric.util.loadImage

而不是

fabric.Image.fromURL

2:

fabric.util.loadImage

接受3个参数，第3个参数应该是

crossOrigin:“匿名”

与下面的代码类似

3：如果您在html中显示图像，请在html中的图像标记中使用

crossOrigin='anonymous'

4：如果您的网站不安全并且您希望从安全网站中提取图像，则会出现cors错误

例如：https与http的对比

• 您在

  localhost:7000上（不安全），希望从中提取图像
  https://hello.com/image2.png
  （安全）
  

• 您在

  http://www.hiee.com

  并希望从中提取图像

  https://hello.com/image2.png

  （安全）

5：如果您仍然存在cors问题，那么从中提取图像的服务器也应该发送这些带有图像

“Access Control Allow Origin”（“*”

）的标题。如何签出这些标题，请在浏览器选项卡中打开图像，然后打开firebug->network，请参阅标题

6:

注意：这将是只适用于本地环境的临时解决方案，但当您从其他网络的浏览器访问相同的url时，CORS问题将再次出现。

尝试以下操作：

 fabric.Image.fromURL('http://img.fkcdn.com/image/dining-chair/b/g/y/fidcbennywncsach-1-cedar-pine-devdar-home-cherry-white-original-imae9fsfbkxrgebt.jpeg', function (img) {
canvas1.add(img.set({
    left: 50,
    top: 50,
    angle: 30
}));
console.log('CORS enabled + crossOrigin property - DataURL: ', canvas1.toDataURL());}, null,{
crossOrigin: 'Anonymous'});

---

为了避免CORS，我不得不将图像下载到服务器上+1用于突出显示“crossOrigin将仅请求通过CORS使用资源的权限，但服务器可以拒绝该权限，在这种情况下还会导致加载图像完全失败”。是否可以在画布上呈现aws s3 bucket中的图像？如果是，请告诉我怎么做？Anonymous值是否区分大小写？嗨@vijay:我有同样的问题，尽管我也应用了crossOrigin:“Anonymous”。我仍然面临着与以下相同的错误：从源“localhost:9000/assets/images/image.png”访问“localhost:9001”的图像已被CORS策略阻止：请求的资源上不存在“Access Control Allow origin”头。Ref:我也尝试过使用

fabric.util.loadImage

，但也不起作用。@aananddham解决方案1:在服务器上允许使用9001中的cors。2：或完全禁用服务器上的cors，并接受来自任何来源的流量。在nodejs中，我会用这个Hi@vijay：谢谢你的超快速回复。我已经在我的服务器文件app.js

this.app.use（（req，res，next）=>{res.header（“访问控制允许源”，“*”）；res.header（“访问控制公开头”，“x-total-count”）；res.header（“访问控制允许方法”，“获取，放置，发布，删除，修补”）；res.header（“访问控制允许头”，“内容类型，授权”）；下一步（）；}）；