download free 30 days trial version buy bucket explorer
Documentation  Download  Purchase  Support  FAQs   Forum   ScreenShots & Demos

Amazon S3 - Manage Cross-Origin Resource Sharing (CORS)

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

CORS Example:

If you are hosting a website in an Amazon S3 Bucket named “s3website”. Your users will load the website endpoint http://s3website.s3-website-us-east-1.amazonaws.com . Now you want to use JavaScript on the web pages stored in the same Bucket to be able to make authenticated GET and PUT requests against the same Bucket by using the Amazon S3’s API endpoint for the Bucket, s3website.s3.amazonaws.com. A browser would normally block JavaScript from allowing these requests, but using CORS, you can configure your Bucket to explicitly enable cross-origin request from s3website.s3-website-us-east-1.amazonaws.com.

How to perform cross-origin resource sharing (CORS) Operations?

You have two following ways to manage CORS configuration on Bucket -
  1. Using Amazon S3 REST API - PUT Bucket cors: You can perform cross-origin resource sharing (CORS) operations by using CORS configuration supported REST API in your application code by writing your own code.
  2. Using Bucket Explorer : You can perform the same cross-origin resource sharing (CORS) operations using Bucket Explorer in just few mouse clicks.

1. Enable Cross-Origin Resource Sharing on Amazon S3 Bucket using REST API - PUT Bucket cors

To enable cross-origin resource sharing (CORS) on your Amazon S3 Bucket, you will need to create an XML document with rules that identify the origins that will allow the access to your Bucket, the operations (HTTP methods) which will support each origin, and other specific operation information.


PUT /?cors HTTP/1.1
Host: < your bucketname >.s3.amazonaws.com
Content-Length: length
Date: currentdate
Authorization: signatureValue
Content-MD5: MD5

<CORSConfiguration>
<CORSRule>
<AllowedOrigin> Origin you want to allow cross-domain requests from </AllowedOrigin>
<AllowedOrigin> ... </AllowedOrigin>
<MaxAgeSeconds> Time in seconds your browser to cache the pre-flight OPTIONS response for a resource </MaxAgeSeconds>
<AllowedHeader> Headers that you want the browser to be allowed to send </AllowedHeader>
<AllowedHeader> ... </AllowedHeader>
...
<AllowedOrigin> ... </AllowedOrigin>
<AllowedOrigin> ... </AllowedOrigin>
...
<ExposeHeader> Headers in the response that you want accessible from client application </ExposeHeader>
<ExposeHeader> ... </ExposeHeader>
...
</CORSRule>
<CORSRule>
...
...
</CORSRule>
</CORSConfiguration>
 

You can add a maximum of up to 100 rules in the configuration. You have to add the XML document as the CORS subresource to the Bucket.

CORS Configuration Example:

Following example of CORS configuration allows cross-origin PUT and POST requests from http://www.mybucket.com origin.


<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>500</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
<ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>http://www.myBucket.com</AllowedOrigin>
<AllowedMethod>HEAD</AllowedMethod>
</CORSRule>
</CORSConfiguration>
 

  • AllowedMethod Element

    • In the CORS configuration, you can specify the values for the AllowedMethod element. These values are: GET, PUT, POST, DELETE, and HEAD.

  • AllowedOrigin Element

    • In the AllowedOrigin element, you specify the origins that you want to allow cross-domain request from; for example: http://www.myBucket.com . The above first rule allows cross-origin PUT and POST requests from all origins. The '*' character refers to all origins. The second rule allows cross-origin HEAD requests from http://www.myBucket.com origin.

  • AllowedHeader Element

    • The AllowedHeader element specifies which headers are allowed in a preflight request through the Access-Control-Request-Headers header. Each header name in the Access-Control-Request-Headers header must match a corresponding entry in the rule. Amazon S3 will send only the allowed headers in a response that were requested.

      The above first rule allows all headers in a preflight OPTIONS request through the Access-Control-Request-Headers header. In response to any preflight OPTIONS request, Amazon S3 will return any requested headers.

  • ExposeHeader Element

    • Each ExposeHeader element identifies a header in the response that you want customers to be able to access from their applications. In the above first rule, customers will be able to access response header x-amz-server-side-encryption only from their applications.

  • MaxAgeSeconds Element

    • The MaxAgeSeconds element specifies the time in seconds (in the first Rule above, it is 5000 seconds) that your browser can cache the response for a preflight request as identified by the resource, the HTTP method, and the origin.


2. Enable Cross-Origin Resource Sharing on Amazon S3 Bucket using Bucket Explorer

With Bucket Explorer, you can easily set cross-origin resource sharing configuration on the Bucket without writing a single line of code.

Follow the steps to set Cross-Origin Resource Sharing Configuration on the Bucket:

  1. Run Bucket Explorer.
  2. List Buckets and select your desired Bucket on which you want to set CORS.
  3. Select Bucket toolbar -> Advanced -> CORS Config -> Set options.
  4. It will open CORS Config panel. You will see Add Rule, Remove Rule, Set and Cancel Action button and a Table of Contents with the list of rules to be applied on Amazon S3 Bucket.
  5. Click on Add Rule . It will open RULE Panel that has Header Combo (Contents value AllowedHeader/AllowedMethod/Allowed Origin/Expose Header/MaxAgeSeconds).
  6. Select the Header from Header Combo and enter corresponding value of the selected header. Click on Add button. You can add multiple headers and their value. You can remove any unwanted header using Remove option.
  7. After adding your desired Header-value pairs, click on Set to add this rule in table.
  8. You can add multiple rules on that Bucket using steps 5-8.
  9. Finally, click on Set button again to set the final CORS configuration on the selected Bucket.

Follow the steps to Remove CORS Configuration from the selected bucket:

  1. Run Bucket Explorer.
  2. List Buckets and Select the desire bucket on which you wan to set CORS.
  3. Select option Bucket Toolbar -> Advanced -> CORS Config -> Remove .
  4. It will prompt you that Are you sure, want to remove CORS Config for the bucket <bucket name> ?
  5. Click on Remove to continue else click on cancel.