'CORS. Presigned URL. S3

I've generated a presigned S3 POST URL. Using the return parameters, I then pass it into my code, but I keep getting this error Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource..

Whereas on Postman, I'm able to submit the form-data with one attached file.

On PostMan, I manually entered the parameters enter image description here

The same parameters are then entered into my code. enter image description here



Solution 1:[1]

You must edit the CORS Configuration to be public , something like:

   <?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

enter image description here

Solution 2:[2]

Unable to comment so adding this here. Contains Harvey's answer, but in the form of a text to make it easy to copy.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Solution 3:[3]

I encountered this issue as well. My CORs configuration on my bucket seemed correct yet my presigned URLs were hitting CORs problems. It turns out my AWS_REGION for my presigner was not set to the aws region of the bucket. After setting AWS_REGION to the correct region, it worked fine. I'm annoyed that the CORS issue was such a red herring to a simple problem and wasted several hours of my time.

Solution 4:[4]

On my case I fixed it by having allowedMethods, and origins in S3. The menu is under the Permissions tab

enter image description here

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Solution 5:[5]

My issue was that for some reason - getSignedUrl returned a url like so:

https://my-bucket.s3.us-west-2.amazonaws.com/bucket-folder/file.jpg

I've removed the region part - us-west-2 - and that fixed it ?????

So instead it is now

https://my-bucket.s3.amazonaws.com/bucket-folder/file.jpg

Solution 6:[6]

In my case I specifically needed to allow the PUT method in the S3 Bucket's CORS Configuration to use the presigned URL, not the GET method as in the accepted answer:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Solution 7:[7]

For me,it was because my bucket name had a hyphen in it (e.g. my-bucket). The signed URL would replace the hyphen in the bucket name with an underscore and then sign it. So this meant two things:

  1. CORS wouldn't work because the URL technically wasn't correct
  2. I couldn't just change the underscore back to the hyphen because then the signature would be wrong when AWS validated the signed URL

I eventually had to rename my bucket to something without a hyphen (e.g. mybucket) and then it worked fine with the following configuration:

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

Solution 8:[8]

My issue was I had a trailing slash (/) at the end of the domain in "AllowedOrigins". Once I removed the slash, requests worked.

Solution 9:[9]

We have to specify only the required HTTP method. we were using the POST method for Presigned URL so removed the "GET" and "PUT" methods from "AllowedMethods"

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Solution 10:[10]

I was getting similar CORS errors even with things properly configured.

Thanks to this answer, I discovered my Lambda@Edge that presigns was using a region that wasn't the right one for this bucket. (which was on us-east-1 for some default stack reason).

So I had to be explicit about the region when generating the presignedPost

reference: https://stackoverflow.com/a/13703595/11832970

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kooskoos
Solution 2 Pranav Joglekar
Solution 3 Math is Hard
Solution 4
Solution 5
Solution 6
Solution 7 John Galt
Solution 8 echelon315
Solution 9 Sareesh Krishnan
Solution 10 Raffael Campos