大家好,
我正在使用 tui-image-editor npm。我想用动态图像在引导模型中打开我的编辑器。
我遇到了这个错误
CORS 策略已阻止从源“ http://localhost:3000 ”访问“ https://bucke_test.s3.amazonaws.com/5e4cf329adb6054a45a8203a/REN_3018.jpg ”中的图像:否“Access-Control-Allow-Origin” ' 请求的资源上存在标头。因此,不允许访问源“ http://localhost:3000 ”。webpack://tui.ImageEditor/./src/js/invoker.js?:214 Uncaught (in promise) 执行命令状态被锁定。
我已经在我的 s3 存储桶中设置了 cors 权限。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
<i className="fa fa-pencil cursor-pointer" aria-hidden="true" onClick={(e)=> this.openImageEditorModel("dynamicimageurl")}></i>
openImageEditorModel = (imageURL) =>{
document.getElementById("openImageEditor").click();
imageEditor = new ImageEditor('#tui-image-editor', {
includeUI: {
loadImage: {
path: imageURL,
name: 'Blank'
},
uiSize: {
width: '900px',
height: '500px'
},
theme: blackTheme,
menu: ['draw', 'text'],
initMenu: 'draw',
me[![enter image description here][1]][1]nuBarPosition: 'right'
},
cssMaxWidth: 600,
cssMaxHeight: 400
});
imageEditor.loadImageFromURL(imageURL, 'My sample image')
}