search

flightlesstux / S3-Directory-Listing

Are you tired of the boring, generic S3 bucket listings? 🥱 Well, look no further! 😎
25 stars 8 forks source link

It doesn't navigate through the folders via CloudFront #2

Open kcksampa opened 1 year ago

kcksampa commented 1 year ago

When the site is exposed via CloudFront by changing the bucketName, const url with the cloudfront distribution dns, it loads all the subdirectories and files to the root folder. Also, it tries to download the folders while click on them instead of navigating to the sub directories. Anyone facing this issue via CloudFront?

ravikdasari commented 1 year ago

hi, getting this error "Error fetching objects: Failed to fetch" any help please

flightlesstux commented 1 year ago

Hi @kcksampa, why you need to use CloudFront?

flightlesstux commented 1 year ago

@ravikdasari Hello, could you follow the readme?

anentropic commented 6 months ago

@kcksampa @ravikdasari

if you put CloudFront in front of your bucket, don't use the CF url anywhere in s3.js e.g. not here: const url = `https://${bucketName}.${s3Domain}/${key}`;

s3Domain should be either the default s3.amazonaws.com or a region-specific url like s3-ap-southeast-2.amazonaws.com

Note that these aren't the "static website" url either, so not s3-website.amazonaws.com (even though it is the url you'd use yourself in the browser to view your S3-Directory-Listing site)

s3Domain is the raw S3 bucket listing XML endpoint that the JS uses to get the data to display directory listings

So... you go to https://${bucketName}.s3-website.amazonaws.com in a browser and get the index.html with s3.js in it, and the JS fetches data from https://${bucketName}.s3.amazonaws.com (const url)

Also... don't restrict your bucket so that it's only accessible from CloudFront using OAC or OAI, for the same reason - the JS needs to be able to use the raw bucket listing url.