S3 Exercise 2.2: Access Content from Another Bucket

(This post is part of the AWS for the Bootcamp Grad series. The series consists of exercises to build familiarity with various aspects of the AWS ecosystem. Again, all of these posts are “exercises” for introductory exposure to AWS — they are NOT represented as best practices.)

Background

In this exercise, you will do the following:

• Create an S3 bucket and configure it to host a static website
• Create another S3 Bucket and configure CORS
• Host a static website that accesses content from the second bucket

Create an S3 Bucket and Configure it for Static Website Hosting

Follow the Create an S3 Bucket and Configure the Bucket to Host a Static Website sections of Exercise 2.1. Get the website URL for the bucket as you will need it in the next step.

Create four files locally:index.html, dog.html, cat.html and error.html.

Copy the following into the index.html file — inserting the website URL for the bucket you just created as indicated below:

<h4>I am a:</h4>
<button onClick=showDogContent()>Dog</button>
<button onClick=showCatContent()>Cat</button>
<h1 id="content"></h1>
<script>
  function loadContent(url) {
    const contentEl = document.getElementById("content")
    //gets content via ajax/HTTP request
    req = new XMLHttpRequest();
    req.open("GET", url, false);
    req.send(null);
    
    contentEl.innerHTML = req.responseText;
  }
  function showDogContent() {
    //replace with your website URL below
    loadContent("YOUR-WEBSITE-URL-HERE/dog.html")
  }
  function showCatContent() {
    //replace with your website URL below
    loadContent("YOUR-WEBSITE-URL-HERE/cat.html")
  }
</script>

This website will behave exactly as the one you created in Exercise 2.1. However, this time, the client-side script accesses content from another object on S3 via an ajax/HTTP request.

Copy the following into the dog.html file:

Woof Woof Woof

Copy the following into the cat.html file:

Meow Meow Meow

Copy the following into the error.html file:

<h1>Whoops</h1>

Upload all of these files to your bucket following the same process as described in the Upload HTML files to the S3 Bucket section of Exercise 2.1.

Visit the website URL from your browser and you should see your index.html content. Click the dog and cat buttons to see the content from the other html files.

Create an S3 Bucket and Configure it for CORS

The purpose of this exercise is to access that content from another bucket. In this section you will create the new bucket and move the dog.html and cat.html files to the new bucket.

Create a second bucket by following the Create an S3 Bucket and Configure the Bucket to Host a Static Website sections of Exercise 2.1. Upload the dog.html and cat.html files to this bucket.

At this point, you need to change the index.html file to point to the dog.html and cat.html website URLs on this new bucket. Open your index.html file locally and change the showDogContent and showCatContentfunctions to the following:

function showDogContent() {
    //replace with your NEW bucket's website URL below
    loadContent("NEW-BUCKET-WEBSITE-URL/dog.html")
 }
function showCatContent() {
    //replace with your NEW bucket's website URL below
    loadContent("NEW-BUCKET-WEBSITE-URL/cat.html")
}

Navigate to the original bucket from the S3 dashboard and upload this new version of your index.html file. Delete the dog.html and cat.html files from this original bucket.

Navigate to the website URL for the original bucket and you will see your index.html content. However the buttons will not work. Open your browser console and click the Dog and Cat buttons. You will see errors like: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Because the dog.html and cat.html content is now hosted on another domain (the domain for the new bucket you created), you cannot access this content through the XMLHttpRequest without configuring that new bucket for Cross-Origin-Resource-Sharing (CORS).

From your S3 dashboard, navigate to the second bucket you created (where cat.html and dog.html are now stored). Click the Permissions tab. Click CORS configuration. Change the AllowedOrigin line as follows (inserting the website URL for your original bucket) and click Save:

AllowedOrigin>YOUR-ORIGINAL-BUCKET-WEBSITE-URL</AllowedOrigin>

Now, navigate back to your original website URL and the buttons should be working again.

Clean Up

Navigate to your S3 dashboard. Click the bucket symbol next to the first bucket name. Then click Delete Bucket. Type the name of the bucket, and click Confirm. Do the same for the second bucket.

Next: Exercise 2.3: Access Content From Another Bucket Using AWS SDK and Cognito