CODEWITHSUNDEEP
javascriptamazon-web-servicesamazon-s3
Aleksei Petrov
Aleksei Petrov

Reputation: 1099

AWS S3 js SDK: Access to XMLHttpRequest at from origin has been blocked by CORS policy

I'm trying to utilize AWS js SDK in my ASP.NET Core 3 web application to access s3 bucket on client and it doesn't work.

  1. I've created a bucket and added following CORS configuration to it:

    <?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

  2. I've created a new IAM user with AmazonS3FullAccess rights with an AccessKey and a Secret.

  3. I've added a added a simple View to verify it with following Scripts section:

    <script src="/lib/aws/aws-sdk-2.592.0.js"></script>
<script language="javascript">
    $(function() {

        AWS.config.update({
            region: 'eu-west-2',
            credentials: new AWS.Credentials('<key>', '<secret>')
        });

        var s3 = new AWS.S3({
            apiVersion: '2006-03-01',
            params: { Bucket: '<bucket>' }
        });

        s3.listObjectsV2(function(err, data) {
                if (err) console.log(err, err.stack);
                else {
                    data.Contents.forEach(function(element) {
                        var row = "<tr>" + 
                                "<td>" + element.Key + "</td>" + 
                                "<td>" + element.LastModified + "</td>" + 
                                "<td>" + element.Etag + "</td>" + 
                                "<td>" + element.Size + "</td>" + 
                                "<td>" + element.StorageClass + "</td>" + 
                                "</tr>"
                        $('#objects-list-table tbody').append(row);
                    });
                }
            });
    });
</script>

And I keep getting following errors in browser console, like there is no CORS configured for bucket:

Access to XMLHttpRequest at 'https://<bucket>.s3.eu-west-2.amazonaws.com/?list-type=2' from origin 'https://localhost:5001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Access to XMLHttpRequest at 'https://<bucket>.s3.amazonaws.com/?max-keys=0' from origin 'https://localhost:5001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

What is wrong with my configuration? How to make it work?

Upvotes: 3

Views: 5108

Answers (1)

Aleksei Petrov
Aleksei Petrov

Reputation: 1099

Just spoofed all HTTP requests with HTTP Toolkit and found, that the region is incorrect. In case if somebody have the same issue and CORS config seems correct - check the region.

In my case, Frankfurt server is not eu-west-2, but eu-central-1

Upvotes: 1

Related Questions