Applying a cross-origin resource sharing (CORS) policy on an API operation

Question

Pulumi · Accepted Answer

To apply a Cross-Origin Resource Sharing (CORS) policy to an API operation, you need to define the CORS policy in terms of which origins are allowed to access your API, which HTTP methods are allowed, and any additional headers you may require. The cloud provider in this context is not specified, so I'll provide an example for AWS API Gateway, a common service for hosting APIs.

In AWS API Gateway, CORS is typically enabled by setting up the appropriate options on a method resource or by defining a CORS policy resource. Here's a Pulumi program in TypeScript that demonstrates how to set up a CORS policy for an API operation using AWS API Gateway.

The program creates an API Gateway REST API resource. Then, it creates a `/example` resource tied to our API. The next step is to configure an `OPTIONS` method for preflight requests, which is needed for browsers to perform CORS preflight checks. Finally, we set up a `GET` method with a mock integration to simulate a response. Both methods are configured with response parameters to set the necessary CORS response headers such as `Access-Control-Allow-Origin`.

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

// Create an API Gateway REST API
const api = new aws.apigateway.RestApi("MyApi", {
    description: "Example API for demonstrating CORS",
});

// Create a resource under the API, for example, 'example'
const exampleResource = new aws.apigateway.Resource("MyExampleResource", {
    restApi: api.id,
    parentId: api.rootResourceId,
    pathPart: "example", // the path part
});

// Define the CORS configuration for our OPTIONS method
const corsConfiguration = {
    "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
    "Access-Control-Allow-Methods": "OPTIONS,GET",
    "Access-Control-Allow-Origin": "*", // This can be restricted to specific domains if needed
};

// OPTIONS method for CORS preflight requests
const optionsMethod = new aws.apigateway.Method("MyOptionsMethod", {
    restApi: api.id,
    resourceId: exampleResource.id,
    httpMethod: "OPTIONS",
    authorization: "NONE", // no authorization for preflight
    methodResponses: [{
        statusCode: "200",
        responseModels: {
            "application/json": "Empty",
        },
    }],
});

// Mock integration for the OPTIONS method to return the necessary CORS headers
const optionsIntegration = new aws.apigateway.Integration("MyOptionsIntegration", {
    restApi: api.id,
    resourceId: exampleResource.id,
    httpMethod: optionsMethod.httpMethod,
    type: "MOCK",
    integrationResponses: [{
        statusCode: "200",
        responseTemplates: {
            "application/json": "",
        },
        responseParameters: {
            "method.response.header.Access-Control-Allow-Headers": "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'",
            "method.response.header.Access-Control-Allow-Methods": "'OPTIONS,GET'",
            "method.response.header.Access-Control-Allow-Origin": "'*'",
        },
    }],
});

// GET method for the actual API call
const getMethod = new aws.apigateway.Method("MyGetMethod", {
    restApi: api.id,
    resourceId: exampleResource.id,
    httpMethod: "GET",
    authorization: "NONE", // update to the appropriate authorization strategy
});

// Mock integration for the GET method, a placeholder for your actual integration
const getIntegration = new aws.apigateway.Integration("MyGetIntegration", {
    restApi: api.id,
    resourceId: exampleResource.id,
    httpMethod: getMethod.httpMethod,
    type: "MOCK", // this is where you would set up the actual integration with your backend
    requestTemplates: {
        "application/json": "{\"statusCode\": 200}",
    },
    integrationResponses: [{
        statusCode: "200",
        responseTemplates: {
            "application/json": "json", // Replace this with actual response mapping
        },
        responseParameters: {
            "method.response.header.Access-Control-Allow-Origin": "'*'", // Ensuring CORS is allowed for GET response
        },
    }],
});

// Deploy the API Gateway
const deployment = new aws.apigateway.Deployment("MyApiDeployment", {
    restApi: api.id,
    // This empty 'stageName' means we're using the default stage
    stageName: "",
});

// The URL at which the API is deployed
const invokeUrl = deployment.invokeUrl.apply(invokeUrl => `${invokeUrl}${exampleResource.pathPart}`);

export const apiUrl = invokeUrl;

```
In the above program, CORS is configured by defining method responses and integration responses with the necessary CORS headers for both the OPTIONS method (which handles preflight requests in CORS) and the GET method (which simulates a simple fetch operation from the API).

Remember to replace the mock integrations with actual integrations tailored to your API's backend application logic. The `'*'` value for `Access-Control-Allow-Origin` allows any origin to access your API. In a production environment, you should replace the `'*'` with a specific domain that's allowed to make cross-origin requests to your API to tighten security.

Once you deploy this Pulumi program, it will create a fully established API Gateway with CORS enabled on the specified operations, and the `apiUrl` output will give you the URL at which the API is deployed and can be accessed from a web application.