Set S3 CORS Configuration to complete cross-domain request

Overview

Cross-Origin Resource Sharing (CORS)is a mechanism that uses additional HTTP headers to allow user agents currently browsing a website to gain access to specific resources on other sources (domain) servers. When a user agent requests a resource that is not the current source of the document — for example, from a different domain, protocol, or port —Create a cross-origin HTTP request.

Take an example of a cross-origin request: http://domain-a.com HTML page inside a <img> tag’s src attribute loaded from http://domain-b.com/image.jpg image. Many pages on the web today include resources such as CSS stylesheets, image images, and scripts from domains that are separate from their location, such as content delivery networks (content delivery networks, CDN). For security reasons, cross-origin HTTP requests made by code are restricted. For example, XMLHttpRequest and Fetch all follow the same-origin policy. This means that the API used by the web application can only request HTTP resources in the same domain as the application unless using CORS headers.

Scenario

• In this tutorial, we will create S3 Bucket x2, host each of their static web pages, and host them in A Bucket via Javascript to simulate cross-domain requests by loading the web content of B Bucket. We will first try CORS Configuration that has not been set up, we will see an error message and then add CORS Configuration Set up to see the results.

Prerequisites

• AWS account

• Open terminal and type the following code to download the files in this tutorial.

  $ git clone https://github.com/ecloudvalley/AWS-S3-CORS.git

Create S3 Bucket and upload file

Now, we create two S3 Bucket to simulate the scenario, since S3 Bucket creation must be uniquely named, so in host two static web pages are different domains. Based on the same-origin policy, there are currently three behaviors between non-homogeneous sources that are restricted.

• Cookie、LocalStorage and IndexDB Unable to read
• DOM Unable to get.
• AJAX The request cannot be sent.

Although these limitations are necessary, there are times when they are inconvenient and reasonable use is compromised. One of the ways to circumvent these three limitations as described below.：CORS

1. login to AWS console AWS console

2. At the top of the console, click Services -> S3

3. click Create bucket

1. type Bucket name : <YOUR-BUCKET-NAME>. In this tutorial we call it Bucket-1 > Bucket name must be unique

2. choose Region, in here we choose US East(N. Virginia) -> Create

3. after creation, click Bucket-1 we just creat, click Properties

4. choose Static website hosting, check Use this bucket to host a website

1. index document type：index.html, error document type：error.html
2. Back to Bucket-1

3. click Upload -> Add files -> Select files downloaded from this tutorial(load.html)

   

4. Next -> Manage public permissions choose Grant public read access to this object(s) -> Next -> Next -> Upload

5. now we back to Bucket-1 -> Prorperties -> Static website hosting. Because we are not storing index.html file in this Bucket, to load load.html need to add /load.html behind the URL.

   

6. You can see that the web page is displayed normally

7. Now we create another Bucket, remember that Bucket name must be unique, in this demo Bucket Name ：<YOUR-BUCKET-NAME>, we call it Bucket-2

8. do the same thing as the Bucket-1

9. just only have to upload index.html error.html to Bucket-2

   remember to choose “Grant public read access to this object(s)” if you forget, just back to the bucket, and select the file -> Actions -> Make public

Before Set S3 CORS

Now we check whether the website was successfully loaded all of the content before we set S3 CORS.

1. At this point, we can see that the contents of load.html were not loaded successfully.

2. Bucket-2 Host web page cannot be totally loaded because of the same-origin policy. Then we set CORS to the second Bucket that accepts cross-domain requests.

3. At the top of the browser, tap view -> Developer -> JavaScript Console

   

4. or right-click on the web page -> Inspect

1. will see the error message as shown in the image. The error message is because, in index.html, we use javascript to load load.html, based on the same-origin policy mentioned earlier, before we have set CORS, cross-domain requests will be blocked, so the content of load.html cannot be loaded.

Set S3 CORS

As already demonstrated earlier, CORS is blocked because of cross-domain requests, but there are times when we need to use cross-domain requests. For example, the web application itself is deployed in different development separation on server, front and rear end, etc.

1. enter Bucket jonny-test-cors-media -> Permissions -> CORS configuration

2. copy the following code to CORS configuration -> Save

   
   
   
   *
   GET
   3000
   Authorization
   
   

3. Refresh the page that just appeared with the error message. If the same error message still appears, clear the cache before refreshing

4. Successfully displayed the content of load.html in jonny-test-cors-media.

Cleanup

Just delete the two Bucket directly.

Conclusion

Now that you have learned how to set up CORS for S3 Bucket, you can configure CORS so that applications from different domains can access the resources within S3.