通过$ .ajax禁止浏览服务器上的文件夹

Question

I'm building a simple webpage with p5.js where a script looks for images in folders and put them all on 1 page.
I'm using the $.ajax({}); to find out if there is anything in the folder, if so, look for images/text files/other folders. The script works when I run it locally, but it the $.ajax({});-part doesn't work and gives a '403 (Forbidden)' message in the browser's console. I set all the folders, text files and images to a 755 permissions on the server, so I don't think the problem is there. It may have to do with CORS, but I'm totally new to that. I'm using GoDaddy as a webhost.
Does anyone know what I need to do in order the look through the files on my server? Thanks in advance

function setup() {
noCanvas();

var folder = "collections/"; //root of folder structure
var num = 'num'; //part of a CSS class name 
var digit = ""; 

$.ajax({
    type: 'GET',
    url : folder,
    success: function (data) {
        console.log("before this line works");
        $(data).find("a").attr("href", function (i, val) {

            if((i>=0)  ){
                console.log("found a thing! : i "+i+" : "+val);

                //if there is a text file:
                if( val.match(/\.(txt)$/) ) {
                    //console.log("found a textfile! :"+i+" : "+val);

                    jQuery.get(folder+val, function(x) {

                        //get the first line in that text file and put it in a div
                        collectiondiv = createDiv(x.split('\n')[0]);
                        if(i<10){digit="-0"+i;}
                        if(i>=10){digit="-"+i;}
                        collectiondiv.class("menunamee").id("menuname"+digit).parent(menu);



                    });
                }               

                //if there is an image
                else if( val.match(/\.(jpe?g|png|gif)$/) ) {
                    console.log("found an image! : i "+i+" : "+val);
                    var img;
                    img = createImg(folder+val);
                    img.class(num+floor(random(1,4))).parent("body");
                }

                //if it's not an image or a text file, it's a folder
                else if( !val.match(/\.(jpe?g|png|gif)$/) && !val.match(/\.(txt)$/) && val.match(/^[0-9]+/)) {
                    //console.log("found a folder! : i "+i+" : "+val);

                    if(i>=0){

                        var collectionDiv;
                        collectionDiv = createDiv("");
                        collectionDiv.class("collectionDivs").id("collectionDiv"+i);




                        //go 1 level deeper into the folder structure
                        var deeperlink = folder+val;
                        $.ajax({
                            url : deeperlink,
                            success: function (d) {
                                $(d).find("a").attr("href", function (j, value) {
                                    //console.log("found a thing in a folder! : i "+i+"  j "+j+" : "+deeperlink+value);
                                    if(j>=0){
                                        //console.log("found a thing in a folder! : i"+i+" j"+j+" : "+deeperlink+value);

                                        //if there is a text file:
                                        if( value.match(/\.(txt)$/)) {
                                            //console.log("found a textfile in a folder! : i "+i+" j"+j+" : "+deeperlink+value);

                                            jQuery.get(deeperlink+value, function(y) {

                                                //get the first line in that text file and put it in a div
                                                menunamediv = createDiv(y.split('\n')[0]);
                                                collectionDivname = createDiv("<br><br>"+y.split('\n')[0]);
                                                if(i<10){digit="-0"+i;}
                                                if(i>=10){digit="-"+i;}
                                                menunamediv.class("menuname").id("menuname"+digit).parent(menu);
                                                collectionDivname.class("collectionDivname").id("collectionDivname"+i).parent("#collectionDiv"+i);
                                                menunamediv.mouseClicked(function(){
                                                        $('html,body').animate({scrollTop: $('#collectionDivname'+i).offset().top},1111,"swing");
                                                });


                                                if(y.split('\n').length>1){
                                                    collectionDivdescription = createDiv("");
                                                    collectionDivdescription.class(num+floor(4)).id("collectionDivdescription"+i).parent("#collectionDiv"+i);
                                                    for(var x=1;x<y.split('\n').length;x++){
                                                       $( "#collectionDivdescription"+i ).append(y.split('\n')[x]);
                                                    }
                                                }                                                   
                                            });
                                        }

                                        //if there is an image
                                        else if( value.match(/\.(jpe?g|png|gif)$/) ) {
                                            //console.log("found an image in a folder! : i "+i+": "+j+" : "+deeperlink+value);
                                            var img;
                                            img = createImg(deeperlink+value);
                                            img.class(num+floor(random(1,4))).parent("#collectionDiv"+i);
                                            //select("#collectionDiv"+i).append( "<img src='"+deeperlink+value+"' class="+num+floor(random(1,4))+">" );
                                        }

                                        //if it's not an image or a text file, it's a folder
                                        else if( !value.match(/\.(jpe?g|png|gif)$/) && !value.match(/\.(txt)$/) && value.match(/^[0-9]+/)) {
                                            //console.log("found a folder in a folder! : i "+i+" j "+j+" : "+deeperlink+value);   



                                            //go 2 levels deeper into the folder structure
                                            var deeperlink2 = deeperlink+value;
                                            $.ajax({
                                                url : deeperlink2,
                                                success: function (d) {
                                                    $(d).find("a").attr("href", function (k, v) {
                                                        if((k>=0) ){
                                                            //console.log("found a thing! : i "+i+" j "+j+" k "+k+" : "+deeperlink2+v);

                                                            //if there is a text file:
                                                            if( v.match(/\.(txt)$/) ) {
                                                                //console.log("found a textfile in a folder in a folder! : "+k+" : "+deeperlink2+value);

                                                                jQuery.get(deeperlink2+v, function(d) {

                                                                    //get the first line in that text file and put it in a div
                                                                    menunamediv = createDiv(d.split('\n')[0]);
                                                                    menunamediv.class("menuname");
                                                                });
                                                            }

                                                            //if there is an image
                                                            else if( v.match(/\.(jpe?g|png|gif)$/) ) {
                                                                //console.log("found an image in a folder in a folder! : i"+i+" j"+j+" k"+k+" : "+deeperlink2+value);

                                                                var img;
                                                                img = createImg(deeperlink2+v);
                                                                //tweak 'grid' here
                                                                var noisynumber = noise(k*.1)*6+1;
                                                                //console.log(noisynumber+" | " +floor(noisynumber));
                                                                img.class(num+floor(noisynumber)).parent("#collectionDiv"+i);
                                                                //$("body").append( "<img src='"+deeperlink2+value+"' class="+num+floor(random(1,4))+">" );

                                                            }
                                                        }
                                                    });
                                                }
                                            });
                                        }                                       
                                    }   
                                });
                            }
                        });         
                    }               
                }
            }
        });
    },
    error: function() {
        console.log("there was an error");
    }
});    

}

Answer 1

Your directory indexes must be enabled, otherwise you get 403 Forbidden message. You can do it by adding:

Options +Indexes

in your .htaccess file. The name of the index file is controlled by DirectoryIndex Directive . By default it is:

DirectoryIndex index.html