Setting up response headers for CORS support in API Gateway

Question

Pulumi · Accepted Answer

CORS, or Cross-Origin Resource Sharing, allows web applications running at one domain to access resources from another domain. To enable CORS on AWS API Gateway, we need to set up the appropriate response headers. Below is a Pulumi program in TypeScript that shows you how to configure an AWS API Gateway REST API with CORS enabled.

Firstly, we'll use the `aws.apigateway.RestApi` to create a new REST API. Then we'll add a resource (like an endpoint path) using `aws.apigateway.Resource`. After that, we'll configure a method using `aws.apigateway.Method` for the OPTIONS HTTP method to handle preflight requests which are used by browsers to check CORS. Lastly, we'll set up the method response and integration response to include the headers required for CORS using `aws.apigateway.MethodResponse` and `aws.apigateway.IntegrationResponse` respectively.

Here is the TypeScript program that performs the outlined steps:

```typescript
import * as aws from "@pulumi/aws";

// Create an AWS API Gateway REST API resource.
const api = new aws.apigateway.RestApi("myApi", {
    description: "Example API for Pulumi CORS support",
});

// Add a resource (like an endpoint path segment) to the REST API.
const resource = new aws.apigateway.Resource("myResource", {
    restApi: api.id,
    parentId: api.rootResourceId,
    pathPart: "myendpoint", // The path segment for the resource
});

// Add an 'OPTIONS' method to handle CORS preflight requests.
const method = new aws.apigateway.Method("optionsMethod", {
    restApi: api.id,
    resourceId: resource.id,
    httpMethod: "OPTIONS",
    authorization: "NONE", // No authorization for preflight
});

// Capture the response part of the 'OPTIONS' method for the API.
const methodResponse = new aws.apigateway.MethodResponse("optionsMethodResponse", {
    restApi: api.id,
    resourceId: resource.id,
    httpMethod: method.httpMethod,
    statusCode: "200",
    responseModels: {
        "application/json": "Empty",
    },
});

// Set up the 'OPTIONS' method response headers for CORS.
const allowedHeaders = [
    "Content-Type",
    "X-Amz-Date",
    "Authorization",
    "X-Api-Key",
    "X-Requested-With",
    "Accept",
    "Access-Control-Allow-Methods",
    "Access-Control-Allow-Headers",
    "Access-Control-Allow-Origin",
];

const integrationResponse = new aws.apigateway.IntegrationResponse("optionsIntegrationResponse", {
    restApi: api.id,
    resourceId: resource.id,
    httpMethod: method.httpMethod,
    statusCode: methodResponse.statusCode,
    responseTemplates: {
        "application/json": "",
    },
    responseParameters: allowedHeaders.reduce((obj, header) => ({
        ...obj,
        [`method.response.header.${header}`]: `'${header.includes("Allow-") ? '*' : ''}'`,
    }), {}),
});

// Define an empty body for 'OPTIONS' integration request.
const integration = new aws.apigateway.Integration("optionsIntegration", {
    restApi: api.id,
    resourceId: resource.id,
    httpMethod: method.httpMethod,
    type: "MOCK", // Using a MOCK integration for OPTIONS request.
    requestTemplates: {
        "application/json": "{\"statusCode\": 200}",
    },
    passthroughBehavior: "WHEN_NO_MATCH",
    integrationHttpMethod: "POST", // AWS requires POST for some reason.
});

// Export the API endpoint for easy access.
export const apiUrl = api.executionArn;
```

In this code, we created an API with an OPTIONS method on `myResource` endpoint to handle preflight requests for CORS. The `methodResponse` defines the status code and the response model, and the `integrationResponse` sets necessary CORS headers such as `Access-Control-Allow-Origin`, `Access-Control-Allow-Headers`, `Access-Control-Allow-Methods`, and others required for CORS support.

Since the OPTIONS request is a CORS preflight request and does not require any backend integration, we use a `MOCK` integration which does not send the request to any backend but allows setting up the response headers. By setting the `passthroughBehavior` to `'WHEN_NO_MATCH'`, it ensures that the mocked response is returned only when there is no other matching resource/method.

We export `apiUrl` to help you easily reference your API endpoint outside of Pulumi.

To deploy this configuration, you will need to have AWS credentials configured for Pulumi on your machine and then run the usual Pulumi CLI commands (`pulumi up`) to create and update your cloud resources.

Remember that this example only sets up the `OPTIONS` method which is used by browsers to perform CORS preflight checks. In a complete setup, you would also define other methods (GET, POST, PUT, DELETE, etc.) and integrate them with actual backend services such as AWS Lambda or HTTP endpoints. You would also configure CORS headers in their responses accordingly.