qoomon / aws-s3-bucket-browser

Single page application to browse AWS S3 bucket content
https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.amazonaws.com/spacenet-dataset#
MIT License
246 stars 85 forks source link

Failed to fetch error is coming #17

Closed cloudnloud closed 3 years ago

cloudnloud commented 3 years ago

I have downloaded index.html and placed in my bucket.

My Bucket policy

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::cnl-test-poc/*",
                "arn:aws:s3:::cnl-test-poc"
            ]
        }
    ]
}

CORS POLICY

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "http://cnl-test-poc.s3-website-us-east-1.amazonaws.com/"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

my s3 bucket url is

http://cnl-test-poc.s3-website-us-east-1.amazonaws.com/

if i access ,i am getting failed to fetch error.Help on this

qoomon commented 3 years ago

Hi, you need to allow CORS access for http://s3.us-east-1.amazonaws.com/cnl-test-poc from http://cnl-test-poc.s3-website-us-east-1.amazonaws.com

Error From Browser Console

Access to fetch at 'http://s3.us-east-1.amazonaws.com/cnl-test-poc?list-type=2&delimiter=/&prefix=&max-keys=50' from origin 'http://cnl-test-poc.s3-website-us-east-1.amazonaws.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

OR

Just use following URL to access your bucket browser http://s3.us-east-1.amazonaws.com/cnl-test-poc/index.html

I hope this will help

cloudnloud commented 3 years ago
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "http://cnl-test-poc.s3-website-us-east-1.amazonaws.com/",
            "http://s3.us-east-1.amazonaws.com/cnl-test-poc"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

i added the above in CORS.still i am getting the failed to fetch error

however the below url is working.

http://s3.us-east-1.amazonaws.com/cnl-test-poc/index.html

is there anyway without index.html can we get it working ?

qoomon commented 3 years ago

may you can try to remove trailing / from http://cnl-test-poc.s3-website-us-east-1.amazonaws.com/ in AllowedOrigins

cloudnloud commented 3 years ago

Yes.It is workng now.Thanks for your help

qoomon commented 3 years ago

Glad to hear that.