Question

我正在尝试从文件夹中获取图像文件名，以将其作为HTML元素动态添加到我的网页中。为了做到这一点，我发现这段代码在本地主机上完美运行。

    var folder = "img/gallery/";

    $.ajax({
        url: folder,
        success: function(data) {
            $(data).find("a").attr("href", function(i, val) {
                if (val.match(/\.(jpe?g|png|gif)$/)) {
                    // TODO: Filter and Title strings needs to be changed
                    var lightboxElement = "<img src=\"img\/gallery\/" + val + "\">";


                    $("#lightbox").append(lightboxElement);
                }
            });
        },
        error: function(exception) {
            console.log(data);
        }
    });

基本上，这段代码的作用是在指定的文件夹中搜索不同类型的图像文件并返回它们的名称。然后，将具有图像源地址的img元素添加到确定的HTML对象（#lightbox）。

当我在本地服务器上运行整个项目时，它完全正常。但是，将其上载到AWS S3存储桶时，该ajax调用不起作用。当我搜索时，我找到了几种可能的解决方案。

1）他们建议将交叉源资源共享（CORS）文件添加到存储桶中。我添加了以下规则的文件。但它没有用。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

2）在S3存储桶选项中，有“Make Public”选项。我对“img”和“gallery”文件夹都使用了该选项，但它不起作用。

3）有人建议使用Amazon Route53 CNAME作为文件夹的路径，如下所示。

var folder = "http://example.com.s3-website-us-east-1.amazonaws.com/img/gallery/";

这也行不通。

最后，在下面你可以找到我加载页面时收到的两条错误消息。

1) Failed to load resource: the server http://example.com/img/gallery/ responded with a status of 404 (Not Found)

2) Uncaught ReferenceError: data is not defined
    at Object.error (custom.js:21)
    at i (jquery.min.js:2)
    at Object.fireWith [as rejectWith] (jquery.min.js:2)
    at z (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)

此外，您可以从Chrome检查的“网络”标签中找到返回的消息。

Code: NoSuchKey
Message: The specified key does not exist.
Key: img/gallery/index.html
RequestId: KSDJGSL3405309lkjLKJ087944GHFG654hJHGjhk8979
HostId: LD0349823=
An Error Occurred While Attempting to Retrieve a Custom Error Document

Code: NoSuchKey
Message: The specified key does not exist.
Key: error.html

提前致谢！

Answer 1

我强烈建议不允许公开列出存储桶内容，但如果这是你的意图，这就是解决方案：

使用存储桶的REST端点（不网站端点）（例如https://example-bucket.s3.amazonaws.com），您的网址如下所示 - 为了清晰起见，添加了换行符。

https://example-bucket.s3.amazonaws.com/
?prefix=img/gallery/
&delimiter=/

这将返回/img/gallery下的前1000个对象（但请注意/中没有前导prefix。

这是List Objects V1 API。对于匿名访问，您不需要任何AWS库......但您需要解析XML并处理分页。

http://docs.aws.amazon.com/AmazonS3/latest/API/RESTBucketGET.html

还有一个V2 API，也在上面的页面中提到过。

如何对AWS S3存储桶进行ajax调用以从文件夹中获取文件名？

1 个答案: