Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CORS. Presigned URL. S3

Tags:

amazon-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

like image 614
ngzhongcai Avatar asked Dec 07 '17 07:12

ngzhongcai


People also ask

What is Presigned S3 URL?

A user who does not have AWS credentials or permission to access an S3 object can be granted temporary access by using a presigned URL. A presigned URL is generated by an AWS user who has access to the object. The generated URL is then given to the unauthorized user.

What is CORS configuration in S3?

A CORS configuration is a document that defines rules that identify the origins that you will allow to access your bucket, the operations (HTTP methods) supported for each origin, and other operation-specific information. In the S3 console, the CORS configuration must be a JSON document.

How does S3 CORS work?

Cross-origin resource sharing (CORS) defines a way for client web applications that are loaded in one domain to interact with resources in a different domain. With CORS support, you can build rich client-side web applications with Amazon S3 and selectively allow cross-origin access to your Amazon S3 resources.


2 Answers

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

like image 134
Abdennour TOUMI Avatar answered Oct 04 '22 17:10

Abdennour TOUMI


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": []     } ] 
like image 21
Pranav Joglekar Avatar answered Oct 04 '22 16:10

Pranav Joglekar