使用 $.ajax 禁止浏览我服务器上的文件夹
Looking through folders on my server with $.ajax forbidden
我正在使用 p5.js 构建一个简单的网页，其中一个脚本在文件夹中查找图像并将它们全部放在一页上。
我正在使用 $.ajax({});查看文件夹中是否有任何内容，如果有，请查找 images/text files/other 文件夹。当我 运行 它在本地时该脚本有效，但它的 $.ajax({});-part 不起作用并在浏览器的控制台中给出“403（禁止）”消息。我在服务器上将所有文件夹、文本文件和图像设置为 755 权限，所以我认为问题不在那里。它可能与 CORS 有关，但我对此完全陌生。我正在使用 GoDaddy 作为虚拟主机。
有谁知道我需要做什么才能浏览我服务器上的文件？提前致谢
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");
}
});
}
您的目录索引必须启用，否则您会收到 403 Forbidden 消息。您可以 do it 添加：
Options +Indexes
在您的 .htaccess 文件中。索引文件的名称由DirectoryIndex Directive控制。默认情况下是：
DirectoryIndex index.html
我正在使用 p5.js 构建一个简单的网页，其中一个脚本在文件夹中查找图像并将它们全部放在一页上。
我正在使用 $.ajax({});查看文件夹中是否有任何内容，如果有，请查找 images/text files/other 文件夹。当我 运行 它在本地时该脚本有效，但它的 $.ajax({});-part 不起作用并在浏览器的控制台中给出“403（禁止）”消息。我在服务器上将所有文件夹、文本文件和图像设置为 755 权限，所以我认为问题不在那里。它可能与 CORS 有关，但我对此完全陌生。我正在使用 GoDaddy 作为虚拟主机。
有谁知道我需要做什么才能浏览我服务器上的文件？提前致谢
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");
}
});
}
您的目录索引必须启用，否则您会收到 403 Forbidden 消息。您可以 do it 添加：
Options +Indexes
在您的 .htaccess 文件中。索引文件的名称由DirectoryIndex Directive控制。默认情况下是：
DirectoryIndex index.html