cropper.js的跨原点问题

Question

我正在使用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，然后将图像传递给cropper构造函数。

我已经将默认选项checkCrossOrigin设置为false，但仍然给出了错误

请求的资源上没有“访问-控制-允许-原产地”标题。因此，“http://localhost:9090”源是不允许访问的。

任何帮助都将不胜感激。

Answer 1

每当任何客户端向服务器提出请求时，客户端和服务器的协议、域和端口必须是相同的。如果这些属性中的任何一个是不同的，那么我们就会得到交叉起源问题。

修补程序不能在客户端的站点上进行，但必须在服务器端进行。在服务器上，您需要确保所有站点的请求都被接受。我们需要对响应的头进行更改。

我使用Vertx作为服务器，这就是我如何处理跨源响应的方法。

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

请不要敲你的头，试着从客户的一方修复它，因为它不能做到。当我不知道的时候，我花了很多时间。

谢谢。

Answer 2

以铬扩展为例。如果我们将作者URL放置在允许的URL中，那么交叉模块调用就不会停止。

否则，它将永远作为选项，而不是POST/GET。