apigateway: add explicit support for CORS

Requirements

• resource.addCorsPreflight(options)
• AllowOrigin
• AllowHeaders with defaults for API Gateway
• AllowMethods
• AllowCredentials
• MaxAge
• ExposeHeaders
• Conditional Vary response header
• Configure response status code (should default to 204)
• Support proxy and non-proxy resources
• Support multiple origins through velocity templates (like in serverless framework).
• Automatically discover allowed methods by default based on model.
• Recursive (apply to all child resources)
• LambdaRestApi (apply a CORS policy to all routes)
• CORS with custom authorizers (good post) through AWS::ApiGateway::GatewayResponse

Nice to Have

• Dynamic CORS handler? (through a Lambda proxy and Access-Control-Max-Age=0)

Non-Requirements

• Response headers in simple requests are out of scope.

Resources

• MDN
• SAM implementation
• Serverless Framework implementation
• API Gateway CORS Survival Guide

Notes

Coming from stack overflow

Note that we get a lot of confusion around this since it only configures the Preflight request. Customers expect it to be a magic setting for enabling CORS headers on their Lambda responses. We cant do this because API Gateway does not allow response header mapping for Lambda proxy. Might be better to call this CorsPreflight? At minimum document it clearly.

[hvital]

Just a few edits:

• Rename IRestApiResource to IResource
• Rename apigateway.PassthroughBehavior.Never to apigateway.PassthroughBehavior.NEVER

export function addCorsOptions(apiResource: apigateway.IResource) {
    apiResource.addMethod('OPTIONS', new apigateway.MockIntegration({
        integrationResponses: [{
        statusCode: '200',
        responseParameters: {
            'method.response.header.Access-Control-Allow-Headers': "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent'",
            'method.response.header.Access-Control-Allow-Origin': "'*'",
            'method.response.header.Access-Control-Allow-Credentials': "'false'",
            'method.response.header.Access-Control-Allow-Methods': "'OPTIONS,GET,PUT,POST,DELETE'",
        },
        }],
        passthroughBehavior: apigateway.PassthroughBehavior.NEVER,
        requestTemplates: {
        "application/json": "{\"statusCode\": 200}"
        },
    }), {
        methodResponses: [{
        statusCode: '200',
        responseParameters: {
            'method.response.header.Access-Control-Allow-Headers': true,
            'method.response.header.Access-Control-Allow-Methods': true,
            'method.response.header.Access-Control-Allow-Credentials': true,
            'method.response.header.Access-Control-Allow-Origin': true,
        },  
        }]
    })
}

[kennu]

I have attached it to the API root and any resource paths like this:

    const api = new apigateway.RestApi(this, 'Api', { ... })
    addCorsOptions(api.root)

    const apiContacts = api.root.addResource('contacts')
    addCorsOptions(apiContacts)

You should be able to verify after deployment in API Gateway Console that everything is present.

But you also need to return an Access-Control-Allow-Origin header from your Lambda, because API Gateway doesn’t add that automatically to the responses. The addCorsOptions() function here only adds a separate OPTIONS method and its headers.

(I do wish API Gateway could handle all of this automagically with a single enable option… It’s been very complicated from the beginning.)