What AWS service to avoid CORS issues with S3 static content and aws backends

Introduction

I've got the following architecture deployed on Amazon AWS.

The goal is to expose a web application (single page application) acting as an entrypoint at https://app.acmecorp.com. This is a single page application that :

• serves static resources (html / js / css)
• needs to access the REST backend via javascript

Backend

The idea is to have the backends deployed in an Elastic Container Service Cluster (via docker). These are then spawned / auto-scaled into target groups that are being served by a loadbalancer. The backend is exposed via https://backend.acmecorp.com. (a DNS CNAME pointing to the AWS loadbalancer)

Frontend

The single page application is deployed in an Amazon S3 Bucket, and exposed via the S3 static site hosting. (http://frontend.s3-website-us-west-2.amazonaws.com). This could also be exposed via a DNS CNAME at http://frontend.acmecorp.com

Reverse Proxy

What I would like to have is the following. Users access the application via https://app.acmecorp.com. This should serve the static content. To avoid CORS setup, I would like the single page app to be able to make API calls from that domain calls to /api, so calls to https://app.acmecorp.com/api/** should map to the backend.

• https://app.acmecorp.com/api -> https://backend.acmecorp.com
• https://app.acmecorp.com/ -> http://frontend.acmecorp.com/index.html

Obviously this can be done with something like Nginx, but I was wondering if there was something that Amazon offers for this, and what kind of building blocks would be required to have this functionality

You may accomplish your goal with Cloudfront and a reverse proxy approach:

1. First create your distribution with app.acmecorp.com as allomed CNAME and upload a custom SSL certificate for this subdomain.

2. Create two origins, one pointing to your bucket and another pointing to your API Load Balancer. These two origins will be used later when you configure your CDN behaviors.

3. Create a behavior for /api that has your balancer as origin, passing all of the headers to origin (which effectively disables the edge caches)

4. Configure the default behavior to point to your S3 bucket.

5. Finally, point your app.acmecorp.com to the CDN endpoint in DNS.

Cloudfront origins and behaviors have many more options you must take care, but the basics to fulfill your needs are there.