Question

目前我在画廊画廊工作，我一直都在关注CORS问题。所以我真的不知道我应该从哪一刻开始，我只是试着描述我已经完成的步骤并描述我的麻烦。

简介

我使用CoffeeScript，jQuery以及存储在Amazon S3上的所有图像。

问题

所以，我的存储桶的第一个CORS配置就像这个：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://level.travel</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
        <AllowedHeader>Origin</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*.level.travel</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
        <AllowedHeader>Origin</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

和开发环境的类似规则（当然是不同的域名）。

在图库初始化时，我只收集图像的URL，然后收集有关它们的一些信息。此部分代码提供了此功能：

images_array.each (i, image)=>
    console.log "Loading image #{i}"
    canvas_image                = new Image
    canvas                      = document.createElement('canvas')
    canvas_context              = canvas.getContext("2d")
    canvas_image.crossOrigin    = 'anonymous'
    image_index                 = i

    canvas_image.onload         = =>
        canvas.width        = canvas_image.naturalWidth
        canvas.height       = canvas_image.naturalHeight
        canvas_context.drawImage(canvas_image, 0, 0)
        localStorage.setItem(@storage_ns(i), canvas.toDataURL('image/jpeg'))
        @full_images[i]     = $(image).data("fullImage")
        @hidden_area.append(canvas)
        @progress_event(canvas, image_index)

    canvas_image.onerror        = => @error_event(image_index)

    if canvas_image.complete || canvas_image.complete is undefined
        canvas_image.src    = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        canvas_image.src    = $(image).data("thumbImage")

根据我的需要，这是MDN solution。

方法@progress_event将每个图像放在数组中（如内存缓存中），并提供一些附加信息。这个数组看起来像这样：

[
    {
        image   : canvas    // the canvas element which will be drawed on main Canvas
        small   : { ... }   // information about small images (eg. size, position)
        large   : { ... }   // similar to small
    }
]

那么最有趣的部分和（我想）我的问题：

图库由两个磁带组成（彼此顶部的大图像和小图像）。要绘制两个磁带，我需要运行@render_gallery_tape两次。这些函数以无限循环（setTimeout，45 FPS）执行，并在requestAnimationFrame中工作。

我打电话给@render_gallery_tape：

@render_gallery_tape('large')
@render_gallery_tape('small')

@render_gallery_tape是异步的，两个函数同时工作。

在@render_gallery_tape我有这个：

// pane is an item of array described above
// @cache_context is a context of off-screen Canvas
@cache_context.drawImage(pane.image,
                         Math.ceil(current_offset),
                         Math.ceil(margin_top),
                         Math.ceil(size.width),
                         Math.ceil(size.height))

因此，有时当我的图库尝试渲染小（底部）磁带时，我会收到安全错误（CORS策略）。浏览器认为我的错误来源。

据我所知，我可以代理这些图像（例如使用nginx），但我们使用EC2，我不想增加应用服务器上的流量。所以我不得不使用S3。

提前致谢。

P.S。如果需要，我可以提供任何其他信息。

Answer 1

可能不是您的问题，但要确保在crossorigin="use-credentials"到<video>标记中。

“元素跟踪其中的数据来自何处，以及它是否知道您从其他网站获得了某些内容（例如，您在画布中绘制的元素是否指向跨源文件），它会“污染”画布。“

画布图像和S3（CORS政策）

1 个答案: