Lab Steps

lock
Logging in to the Amazon Web Services Console
lock
Understanding RESTful APIs
lock
Defining New API Gateway Resources
lock
Creating an AWS Lambda Function Backend
lock
Versioning and Aliasing the Lambda Function
lock
Configuring the API Gateway Backend
lock
Following Best Practices for Versions, Aliases, and Stages
lock
Creating API Keys and Usage Plans
lock
Enabling CORS on API Gateway Resources
lock
Enabling API Gateway Caching and Throttling
lock
Cleaning up API Resources and Lambda Functions
Need help? Contact our support team

Here you can find the instructions for this specific Lab Step.

If you are ready for a real environment experience please start the Lab. Keep in mind that you'll need to start from the first step.

Introduction

CORS stands for Cross-origin resource sharing. It is a set of standard HTTP headers used to restrict the access of web resources from other domains. In the web app security model, this is called same-origin policy, and it's supposed to avoid cross-site scripting (XSS) attacks. Browsers will not fetch the requested resources unless the corresponding server attaches the required HTTP headers in the OPTIONS call (or GET method).

The API Gateway will not automatically add these headers, but it provides a very user-friendly wizard. In this Lab Step, you will see how to enable CORS on our API Gateway resources. Keep in mind that you need to enable it on each resource.

 

Instructions

1. Select the /items API Resource and click on Actions > Enable CORS:

 

alt

This starts a wizard that allows you to configure which headers to serve and which headers are allowed. A minimal CORS integration would require at least the Access-Control-Allow-Origin header. If its value is *, every domain will be allowed to fetch this resource. The API Gateway will automatically allow GET and OPTIONS methods, plus all the default headers used by AWS services (Content-Type, X-Amz-Date, X-Api-Key, X-Amz-Security-Token and Authorization). This will guarantee that you can use API Keys, Basic Authentication and IAM tokens.

 

2. Click Enable CORS and replace existing CORS headers to enable CORS with the default values:

alt

 

An additional confirmation popup will follow, with a list of all the required operations that will be executed for you:

alt

Note that there is not too much magic going on here. The API Gateway will simply configure itself to enable CORS on the specified resource, by creating a new OPTIONS method and all the required Method Response and Integration Response options. 

 

3. Click Yes, replace existing values.

You can always customize or remove this integration afterward or even do it yourself manually.

 

4. Repeat the above instructions except using the /items/{ID} resource to enable CORS for it.

After enabling CORS on both resources, your API should look like this:

alt

Note: The OPTIONS method will be invoked by the browser as a preflight request, before the actual GET request. If the OPTIONS call doesn't succeed, browsers won't even issue your GET request.

 

Summary

In this Lab Step, you used the API Gateway wizard for enabling CORS on both of your API resources. CORS enhances the security of web apps.