Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/421.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript cropper.js的跨源问题_Javascript_Angularjs_Cropper_Cropperjs - Fatal编程技术网

Javascript cropper.js的跨源问题

Javascript cropper.js的跨源问题,javascript,angularjs,cropper,cropperjs,Javascript,Angularjs,Cropper,Cropperjs,我正在使用crapper.js裁剪图像 我写了一个指令,它将获取图像src return { restrict: 'A', controller: _cropperController, bindToController: { imagesrc:"=?" }, link:function($scope, $element, $attrs, ctrl){ var img

我正在使用crapper.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;
            }

        }
    };
然后创建image元素,将其附加到dom中,并将图像传递给crapper构造函数

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

请求的服务器上不存在“Access Control Allow Origin”标头 资源。因此,不允许使用源“” 进入


任何帮助都将不胜感激。

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


否则,它将始终作为选项,而不是POST/GET

每当任何客户端向服务器发出请求时,客户端和服务器的协议、域和端口必须相同。如果这些属性中的任何一个是不同的,那么我们就会遇到跨原点问题

无法在客户端站点进行修复,但必须在服务器端进行修复。在服务器上,您需要确保所有站点的请求都被接受。我们需要更改响应的标题

我使用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");
请不要撞到你的头,试着从客户的角度来修复它,因为这是不可能做到的。我在不知不觉中花了很多时间

谢谢。

“我已经将默认选项checkCrossOrigin设置为false,但仍然给出了错误”-当然是这样。。。你不能简单地“禁用”这一点,你从远程方获得的图像是一个必须允许这一点。