在 Firebase 存储中启用 CORS答案

【问题标题】：Enabling CORS in firebase Storage在 Firebase 存储中启用 CORS
【发布时间】：2018-07-05 02:44:54
【问题描述】：

我正在使用 Angular 4 和 Fabric.Js 开发应用程序。作为后端，我使用的是 firebase。

我在尝试对图像应用过滤器时遇到问题。示例如下：

filterTest() {
const image = this._canvas.getActiveObject();
image.filters.push(new fabric.Image.filters.Grayscale());
image.applyFilters();
this._canvas.renderAll();
}

当我尝试执行上述代码时，我不断收到以下错误：

在“WebGLRenderingContext”上执行“texImage2D”失败：跨域图像位于...

我在网上看到了一些解决方法，但似乎没有一个适合我。

我该怎么办？有没有人有同样的问题？如果需要更多信息，请告诉我！

【问题讨论】：

您可能需要为您的存储桶启用 CORS。 firebase 文档中有说明：firebase.google.com/docs/storage/web/…
你好，西德尼。我试图这样做，但是我不断收到同样的错误。这是我的 cors.json: [{ "origin":["*"], "responseHeader": ["Content-Type"], "method": ["GET", "HEAD", "POST", "PUT ", "DELETE"], "maxAgeSeconds": 3600 }]。然后我跑了 gsutil cors set cors.json gs://my-bucket-name
您可以使用 Firebase JavaScript SDK 下载图片吗？如果是这样，那可能和canvas有关。
是的。我可以将图像添加到我的画布上然后进行操作。我还可以使用 XMLHttpRequest() 发送 HTTP 请求。

标签： angular firebase cors fabricjs firebase-storage

【解决方案1】：

对于那些正在寻找这个问题的答案的人：

我的问题是我试图使用 fabric.util.loadImage() 从 JSON 文件加载图像，但是我没有将最后一个参数设置为“匿名”！

【讨论】：