Ajax GET request throwing 403 on local server (nginx)

[pulsar crystal]

Hey guys I have this code that I've put in my index.html.

My web console says:

403 Forbidden

GET http://<my.server.ip>/imagedater/outputs/

and then a bunch of other stuff like Content-Type: text/html, Connection: keep-alive etc...

Can anyone help? I am new to web dev

var folder = "imagedater/outputs/";

$.ajax({
  url: folder,
  success: function (data) {
    $(data).find("a").attr("href", function (i, val) {
      if (val.match(/\.(jpe?g|png|gif)$/)) {
        $("body").append( "<img src='"+folder+val+"'>");
      }
    });
  }
});

[wheat stone]

The problem is not going to be with the ajax code that requests it. You're getting forbidden from the server, which means the server is expecting some kind of authorization for this route. How is the server configured and how is this route configured on the server? Are you supposed to be logged in, in order to see it?

[pulsar crystal]

@pulsar crystal

The 403 Forbidden error indicates that the server is refusing to fulfill your request. This can happen for various reasons, but the most common one is a lack of permission to access the requested resource.

File Permissions:
Ensure that the folder imagedater/outputs/ and its contents have the necessary read permissions for the user making the request. The web server user (like Apache, Nginx, etc.) should have read access to the files and directories.

Directory Listing:
The error message suggests that you are trying to access the directory directly (imagedater/outputs/). Make sure that directory listing is enabled on your server or specify the exact file you want to access.

[elfin acorn]

@pulsar crystal please stop sending duplicate messages

[pulsar crystal]

Correct Path:
Double-check the path you are using in your AJAX request (url: folder). Ensure it is correct and points to the intended directory on your server.

Server Configuration:
Check your server configuration to ensure it allows directory listing if that's what you intend to do. Also, make sure that the server is configured to handle the types of requests you are making.

Cross-Origin Issues:
If your HTML file is on a different domain than your server, you might be facing Cross-Origin Resource Sharing (CORS) issues. Ensure that your server is configured to allow requests from your domain.

[elfin acorn]

@pulsar crystal please stop sending duplicate messages

[pulsar crystal]

Here's a modified version of your code with an additional error handler to give you more information:

var folder = "imagedater/outputs/";

$.ajax({
url: folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if (val.match(/.(jpe?g|png|gif)$/)) {
$("body").append("<img src='" + folder + val + "'>");
}
});
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("AJAX Request Failed: " + textStatus + ", " + errorThrown);
}
});

Check the console for the output of the error handler. It might provide more details about why the server is returning a 403 error. If you still can't figure it out, you may need to consult your server logs for more information.

@pulsar crystal

[pulsar crystal]

thanks for all your help, you pointed me in the right direction

I spent so long troubleshooting but FINALLY found the solution

this is it

I had to put my outputs folder as a root in nginx config

var folder = "outputs/";

$.ajax({
  url: folder,
  success: function (data) {
    $(data).find("a").attr("href", function (i, val) {
      if (val.match(/.(jpe?g|png|gif)$/)) {
        $("body").append("<img src='" + folder + val + "'>");
      }
    });
  },
  error: function (jqXHR, textStatus, errorThrown) {
    console.log("AJAX Request Failed: " + textStatus + ", " + errorThrown);
  }
});

then change my script to this

[pulsar crystal]

No problem

I see you did a good job

[pulsar crystal]

😁 yup, now I'll try to make a blog post for future Googlers

Also I made a cool thing to sort all my images by the date in their filename

this short script will get all the files from the folder, appends them to the .container div, sorts them by their date (filename has to be something-DD_MM_YYYY-something), then re-appends them to the .container div (which doesn't need to be cleared first because element IDs must be unique)

but this could be rewritten for any filename

it's just that my image generator I made outputs them in that format

in fact this is more readable