3

大家好,

我正在使用 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')
        }
4

1 回答 1

0

也许您可以尝试在 chrome 浏览器中安装此扩展程序。我已经尝试过了,它适用于 localhost 环境

允许 CORS:访问控制允许来源。https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

于 2021-11-30T09:10:11.250 回答