CODEWITHSUNDEEP
amazon-web-servicesamazon-s3cors
samy KHEZNADJI
samy KHEZNADJI

Reputation: 141

How to configure the CORS policy in Amazon S3 to upload documents from React App?

I am sending this message here because I want to clarify some questions about a backend solution that I am developing on AWS. Actually, I have 1 question that I would really like you to answer me :)

So, I configured S3 bucket with public access in order to be able to upload files from a front react application. However, even having configured the CORS policy to allow all origins, I get a No Access-Control-Allow-Origin header is present on the requested resource error in my browser. The CORS policy I applied to my S3 bucket is in the following picture:

CORS policy screenshot

I tried to solve the problem by recreating other strategies and even by recreating another bucket ... I ended up letting go.

But the strangest thing is that a day later, without me having touched anything, the original CORS error has disappeared, and now I can upload my files in the S3 bucket normally.

Why it didn't work before and why it started to work on its own?

Upvotes: 1

Views: 5036

Answers (1)

vumdao
vumdao

Reputation: 631

If everything setup correctly then it works as it is, your question does not have full information or any clues to investigate and understand the problem.

An example of Cross-origin resource sharing (CORS) to reference which restrict permission to your domain only as the best practice.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "https://*.cloudopz.co"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "http://*.cloudopz.co"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]

Upvotes: 2

Related Questions