Parse.com 和 Fabric.js，如何修复托管图像的 CORS 错误

Question

我正在使用 Parse.com 存储移动应用程序的图像文件。图像已正确存储和检索。问题是当图像添加到 FabricJS 画布时，画布被标记为“污染”，因此无法保存（使用 canvas.toDataURL）。

我尝试添加“crossOrigin”选项：

fabric.Image.fromURL( ... parse.com url .. , function(img) {
            img.set({
              left: 10,
              top: 10
            });
            $scope.canvas.add(img);
            $scope.canvas.setActiveObject(img);
          }, { "crossOrigin" : "anonymous" } );

但是这返回了错误：

来自“http://files.parsetfss.com”的图片已被阻止 通过跨域资源共享策略加载：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:8888” 访问。

我找不到在 Parse.com 中添加上述标题的方法。我也无法实现代理服务器，因为这就是使用 Parse.com 的全部意义所在。

感谢您的帮助，谢谢。

Answer 1

使用 Parse.com“云代码”找到了解决方案。步骤如下：

1. 在 Parse.com 中，创建一个代理服务器（用 Express 编写）。此代理服务器添加 CORS 标头。

// These two lines are required to initialize Express in Cloud Code.
var express = require('express');
var app = express();

// Global app configuration section
app.set('views', 'cloud/views');  // Specify the folder to find templates
app.set('view engine', 'ejs');    // Set the template engine
app.use(express.bodyParser());    // Middleware for reading request body

//
// Example request:
// http://files.parsetfss.com/XXX/YYY
//
app.get('/images/:tag1/:tag2', function(req, res) {

  Parse.Cloud.httpRequest({
    url: 'http://files.parsetfss.com/' + req.params.tag1 + "/" + req.params.tag2,
    success: function(httpResponse) {
      // add CORS headers
      res.set("Access-Control-Allow-Origin", "*");
      res.set("Access-Control-Allow-Headers", "X-Requested-With");
      res.set('Access-Control-Allow-Headers', 'Content-Type');

      res.send(httpResponse.buffer);
    },
    error: function(err) {
      console.log(err);
      res.send('Error finding file');
    }
  });

});

// Attach the Express app to Cloud Code.
app.listen();

有关在 Parse.com 上设置 Cloud Code 的更多详细信息，请参见此处：https://parse.com/docs/js/guide#cloud-code

1. 更新 FabricJS 调用以将 crossOrigin 设置为“匿名”并将调用重定向到您的代理服务器。

        var url = <originalimageurl>;
        url = url.replace("http://files.parsetfss.com/", 
                          "http:\/\/<parsecom-domain>.parseapp.com\/images\/");
        fabric.Image.fromURL(url, function(img) {
            img.set({
              left: 10,
              top: 10
            });
            $scope.canvas.add(img);
            $scope.canvas.setActiveObject(img);
          }, { "crossOrigin" : "anonymous" } );

将<originalimageurl> 替换为存储在 Parse.com 中的原始图像 url。 将 <parsecom-domain> 替换为 Parse.com 中的子域。

由于客户端 (FabricJS) 和代理服务器 (Parse.com CloudCode) 支持 CORS，这将起作用。创建的图像将不再被视为跨源，因此画布不会被污染。最终，画布现在可以保存了！

我希望这对其他人有所帮助。干杯。