apigateway: add explicit support for CORS

[eladb]

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.

[eladb]

From @kennu:

function addCorsOptions(apiResource: apigateway.IRestApiResource) {
  const options = 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}"
    },
  }))
  const methodResource = options.findChild('Resource') as apigateway.cloudformation.MethodResource
  methodResource.propertyOverrides.methodResponses = [{
    statusCode: '200',
    responseModels: {
      'application/json': 'Empty'
    },
    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,
    },
  }]
}

[FinnIckler]

I am also currently struggling with this. How do you actually use the provided code snippet? Add it to the root of the api? Or for every Resource I want to enable CORS for? I currently have something like:

const blog_api = new apigw.RestApi(this,"Blog-Rest-Api");
const blogs =  blog_api.root.addResource('blogs');

const blog  = blogs.addResource('{blog_id}');
const addBlog = blogs.addResource('add');

// A get to blogs just returns all blogs
const getBlogsIntegration = new apigw.LambdaIntegration(getBlogsHandler);
blogs.addMethod('GET',getBlogsIntegration);

// A get to blogs/id gets only the one blog with the specific id 
const getBlogIntegration = new apigw.LambdaIntegration(getBlogHandler);
blog.addMethod('GET',getBlogIntegration);

With what variables to I have to call addCorsOptions and at which point? I tried on the root and on blogs, but couldn't get it to work yet.

[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.)

[FinnIckler]

Thanks, that worked!

[piotrkubisa]

Example provided by @kennu stopped working for the latest version of the CDK. However, after some changes following code is working for me:

function addCorsOptions(apiResource: apigateway.IRestApiResource) {
  const options = 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}"
    },
  }))
  const methodResource = (options as cdk.Construct).node.findChild("Resource") as apigateway.CfnMethod
  methodResource.propertyOverrides.methodResponses = [{
    statusCode: '200',
    responseModels: {
      'application/json': 'Empty'
    },
    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,
    },
  }]
}

As a hint if you get 500 status on OPTION methods is to set following in the MockIntegration definition (it is a common error if you are using compression over API Gateway):

contentHandling: apigateway.ContentHandling.ConvertToText

[wmunyan]

Hello, I am trying to implement something similar, but in Java. I unfortunately cannot get past the const methodResource = (options as cdk.Construct).node.findChild("Resource") as apigateway.CfnMethod piece of this code.

The Java implementation is not letting me cast the cdk.Construct to an apigateway.CfnMethod.

Any Java experts out there who might be able to lend a hand?

Thanks in advance!

[piotrkubisa]

I can't help but I am looking forward to #1572 be resolved and merged.

[wmunyan]

@piotrkubisa thank you for the note and reference to the issue. I'll be keeping an eye out for that issue as well!