我正在使用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'因此是不允许的 访问。
任何帮助都将不胜感激。
答案 0 :(得分:0)
每当任何客户端向服务器发出请求时,客户端和服务器的协议,域和端口必须相同。如果这些属性中的任何一个不同,那么我们就会得到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");
请不要试图从客户端修复它,因为无法完成。当我不知道的时候,我花了很多时间。
感谢。
答案 1 :(得分:-1)
以chrome扩展为例。如果我们将作者URL放在允许的URL中,则不会停止Cross模块调用。
否则它将始终作为OPTIONS而不是POST / GET。