gpt4 book ai didi

javascript - cropper.js 的跨源问题

转载 作者:行者123 更新时间:2023-11-30 06:51:13 29 4
gpt4 key购买 nike

我正在使用 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但还是报错

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9090' is therefore not allowed access.

如有任何帮助,我们将不胜感激。

最佳答案

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

修复不能在客户端进行,而必须在服务器端进行。在服务器端,您需要确保接受来自所有站点的请求。我们需要更改响应的 header 。

我正在使用 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");

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

谢谢。

关于javascript - cropper.js 的跨源问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46067375/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com