cropper.js 的跨域问题答案

【问题标题】：Cross origin issue with cropper.jscropper.js 的跨域问题
【发布时间】：2017-09-07 13:42:09
【问题描述】：

我正在使用cropper.js 来裁剪图像我写了一个指令，它将获取图像 src

return {
        restrict: 'A',
        controller: _cropperController,
        bindToController: {
            imagesrc:"=?"
        },
        link:function($scope, $element, $attrs, ctrl){
            var img = document.createElement("img");
            img.src = ctrl.imagesrc;
            img.id='image';
            document.getElementsByTagName("body")[0].appendChild(img);
            Cropper.setDefaults({
                checkCrossOrigin: false
            });
            var cropper = new Cropper(img, {
                aspectRatio: 1 / 1,
                checkCrossOrigin: false,
                crop: function(e) {
                    console.log(e.detail.x);
                    console.log(e.detail.y);
                }
            });
            if(cropper.getCroppedCanvas()){
                var imgurl =  cropper.getCroppedCanvas().toDataURL();
                ctrl.imagesrc= imgurl;
            }

        }
    };

然后创建图像元素，将其附加到 dom 并将图像传递给裁剪器构造函数

我已将默认选项 checkCrossOrigin 设置为 false 但仍然报错

请求中没有“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://localhost:9090” 访问。

任何帮助将不胜感激。

【问题讨论】：

“我已将默认选项 checkCrossOrigin 设置为 false，但仍然给出错误” - 当然可以……你不能简单地“禁用”它- 您从获取图像的远程方是必须允许这样做的一方。

标签： javascript angularjs cropper cropperjs

【解决方案1】：

当任何客户端向服务器发出请求时，客户端和服务器的协议、域和端口必须相同。如果这些属性中的任何一个不同，那么我们就会得到 Cross Origin Issue。

无法在客户端站点进行修复，而必须在服务器端进行修复。在服务器上，您需要确保接受来自所有站点的请求。我们需要更改响应的标头。

我使用 Vertx 作为服务器，这就是我处理 Cross Origin 响应的方式

routingContext.response().putHeader("content-type", "application/json")
      .putHeader("Access-Control-Allow-Origin", "*")
      .putHeader("Access-Control-Allow-Headers", "Content-Type")
      .putHeader("Access-Control-Allow-Headers", "Authorization")
      .putHeader("Access-Control-Allow-Methods", "GET, POST, PUT , OPTIONS");

请不要敲打你的头尝试从客户端修复它，因为它无法完成。我在不知不觉中花了很多时间。

谢谢。

【讨论】：

【解决方案2】：

以 chrome 扩展为例。如果我们将作者 URL 放在允许的 URL 中，则不会停止跨模块调用。

否则它将始终作为 OPTIONS 而不是 POST/GET。

【讨论】：