フォルダからファイル名を取得するAWS S3バケットへのajax呼び出しの作成方法

Question

イメージファイル名をフォルダから取得して、HTML要素として動的にWebページに追加しようとしています。これを行うために、私はローカルホスト上で完全に動作するこのコードを見つけました。

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); 
     } 
    }); 

基本的に、このコードは指定されたフォルダ内のさまざまな種類の画像ファイルを検索して名前を返します。次に、画像のソースアドレスが決定されたHTMLオブジェクト（＃ライトボックス）に追加されたimg要素。

ローカルサーバーでプロジェクト全体を実行すると、正常に動作します。ただし、AWS S3バケットにアップロードすると、そのajaxコールは機能しません。私が検索したとき、私は可能な解決策のカップルを見つけました。

1）バケットにCross-Origin Resource Sharing（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バケットオプションには、「公開する」オプションがあります。私は "img"と "gallery"の両方のフォルダにそのオプションを使用していて、うまくいきませんでした。

3）Amazon Route53 CNAMEをこのようなフォルダのパスとして使用することをお勧めします。

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

これも機能しませんでした。

最後に、ページを読み込むと2つのエラーメッセージが表示されます。

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

Iの高いバケット内容の公開リストを許可する反対をお勧めしますが、それはあなたの意図であれば、ここでの解決策はあるでしょう：

RESTエンドポイントを使用して（ないウェブサイトのエンドポイント）バケットの（例：https://example-bucket.s3.amazonaws.com）あなたのURLはこのように見えます - 分かりやすくするため改行が追加されました。

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もあります。