apigateway: add explicit support for CORS #906

eladb · 2018-10-11T18:38:19Z

eladb · 2018-10-24T09:08:40Z

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 · 2018-11-07T14:50:22Z

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 · 2018-11-07T15:21:24Z

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 · 2018-11-08T08:57:56Z

Thanks, that worked!

piotrkubisa · 2019-01-18T09:19:54Z

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 · 2019-01-18T20:08:44Z

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 · 2019-01-19T13:07:51Z

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

wmunyan · 2019-01-19T17:47:17Z

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

justinThompson · 2019-04-02T14:15:39Z

The propertyOverrides.methodResponses option no longer works after the refactor: readonly struct properties and hide internals PR.

I'm not really sure how to work around this now.

Any ideas?

kennu · 2019-04-07T02:55:42Z

I think you can now specify the method responses as an option to addMethod()

export function addCorsOptions(apiResource: apigateway.IRestApiResource) {
  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,
      },  
    }]
  })
}

justinThompson · 2019-04-07T11:18:13Z

Oh nice one, thanks 👍

sankeyraut · 2019-07-06T12:52:09Z

This is not working. Broken in 0.37.0 ?

eladb · 2019-07-07T17:56:28Z

What is not working? What is the error you are seeing?

hvital · 2019-07-09T07:54:00Z

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,
        },  
        }]
    })
}

sankeyraut · 2019-07-10T18:11:06Z

Works like a charm

vegetabill · 2019-08-19T23:29:09Z

Just curious why it's MockIntegration. It feels weird to put that in a production config

ghost · 2019-08-28T03:10:52Z

@eladb I'm using LambdaRestApi and when I try to add this - it simply remove the lambda integration.... how to add CORS in this case ?

const APIGW = new apigw.LambdaRestApi(this, 'ListBranchesAPIGW', {
handler: FUNCTION,
apiKeySourceType: apigw.ApiKeySourceType.HEADER,
restApiName: 'ListBranchesAPI',
deployOptions: { stageName: 'prod' },
defaultMethodOptions: { apiKeyRequired: true },
proxy: true
});
addCorsOptions(APIGW.root)

ghost · 2019-08-29T13:52:01Z

thanks every one on this thread for the code samples. Finally, I successfully, deployed an API Gateway + Lambda Proxy with COGNITO Authorizer - sharing the code - might help someone who lands here..

    // construct: lambda
    const FUNCTION = new lambda.Function(this, 'ListBranchesHandler', {
      runtime: lambda.Runtime.NODEJS_10_X,
      code: lambda.Code.asset('lib/list-branches/function'), // your function directory
      handler: 'list-branches.handler'
    });

    // construct: apigw
    const APIGW = new apigw.LambdaRestApi(this, 'ListBranchesAPIGW', {
      handler: FUNCTION, // attaching lambda function
      apiKeySourceType: apigw.ApiKeySourceType.HEADER,
      restApiName: 'ListBranchesAPI',
      deployOptions: { stageName: 'prod' },
      defaultMethodOptions: {
        apiKeyRequired: false
      },
      proxy: false
    });

    // --> defining an authorizer COGNITO
    const authorizer = new CfnAuthorizer(this, 'CognitoAuth', {
      restApiId: APIGW.restApiId.toString(),
      type: apigw.AuthorizationType.COGNITO,
      identitySource: 'method.request.header.Authorization',
      name: 'CognitoAuthName',
      providerArns: ['ARN OF COGNITO USER POOL']
    })
    // --> defining an authorizer COGNITO

 const resource = APIGW.root.addResource('branches') // creating a resource
    addCorsOptions(resource) // adding OPTION for CORS

    // --> adding the authorizer
    const method = resource.addMethod('GET', undefined, {
      // apiKeyRequired: true, // enable this if you need API key
      authorizationType: apigw.AuthorizationType.COGNITO,
      authorizer: {authorizerId: authorizer.ref}
    })
     // --> adding the authorizer

    function addCorsOptions(apiResource: apigw.IResource) {
      apiResource.addMethod('OPTIONS', new apigw.MockIntegration({
        integrationResponses: [{
          statusCode: '200',
          // contentHandling: apigw.ContentHandling.CONVERT_TO_TEXT,
          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-Origin': "'*'",
            'method.response.header.Access-Control-Allow-Credentials': "'false'",
            'method.response.header.Access-Control-Allow-Methods': "'GET,OPTIONS'", // modify this based on methods
          }
        }],
        passthroughBehavior: apigw.PassthroughBehavior.WHEN_NO_MATCH,
        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, // COGNITO
            'method.response.header.Access-Control-Allow-Origin': true,
          }

        }]
      })
    }

gadams999 · 2019-09-03T00:59:14Z

thanks every one on this thread for the code samples. Finally, I successfully, deployed an API Gateway + Lambda Proxy with COGNITO Authorizer - sharing the code - might help someone who lands here..

// --> defining an authorizer COGNITO
const authorizer = new CfnAuthorizer(this, 'CognitoAuth', {
  restApiId: APIGW.restApiId.toString(),
  type: apigw.AuthorizationType.COGNITO,
  identitySource: 'method.request.header.Authorization',
  name: 'CognitoAuthName',
  providerArns: ['ARN OF COGNITO USER POOL']
})

@smfontevan, this is super helpful. I have a CFn stack where I assign a function to each resource's method (or at least to each resource), but the [LambdaRestApi] construct (https://docs.aws.amazon.com/cdk/api/latest/python/aws_cdk.aws_apigateway/LambdaRestApi.html) wasn't getting me there. I don't work with API Gateway a lot, so seeing your JS code was helpful. While converting to Python, the Cognito authorizer above wasn't working. I noticed in the CloudFormation definition that type should be TOKEN, 'COGNITO_USER_POOLS, or 'REQUEST.

Haven't fully tested yet (waiting on CloudFront distro delete/create), but this has helped understand the non-swagger/AWS:SERVERLESS was of creating an API gateway.

EDIT: code formatting

eladb · 2019-09-20T06:15:06Z

S3 CORS support: https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-s3-bucket-cors-corsrule.html

eladb · 2019-09-21T09:07:40Z

We are planning to implement this feature on a live Twitch stream next week: https://www.twitch.tv/events/4tjzcuGeSymHA5UCn-MbrA

Would love to have you guys over for real time feedback and inputs!

spaceemotion · 2019-09-23T09:48:08Z

It would be great if the API would allow modifying the origins (and maybe methods?) to support the following setup:

the backend at api.site.com only allows access for
the SPA frontend at app.site.com

rix0rrr · 2019-09-23T09:52:35Z

The OPTIONS request can (should?) return HTTP/1.1 204 No Content instead of a bogus JSON response.

eladb · 2019-09-23T15:25:09Z

@spaceemotion not sure I understand the requirement. Wouldn't that just mean specifying Allow-Origin: https://app.site.com?

spaceemotion · 2019-09-23T15:26:30Z

Yes. I just thought I'd mention it since you said you'd want to implement the feature next/this week. Not sure what that entails, but setting the origin via props would be nice. Setting it by hand using the methods described above works like a charm.

eladb · 2019-09-23T15:29:12Z

Cool, yeah. Obvsiouly users should be able to specify the allowed origin(s).

moravcik · 2020-02-14T10:05:04Z

For anybody interested, I managed to setup Gateway response for custom authorizer (when access is denied) with CfnGatewayResponse:

new CfnGatewayResponse(this, 'AccessDeniedResponse', {
  responseType: 'ACCESS_DENIED',
  restApiId: api.restApiId, // reference to RestApi created earlier
  statusCode: '403',
  responseParameters: {
    'gatewayresponse.header.x-my-custom-header': "'my-custom-header-value'",
  },
  responseTemplates: {
    'application/json': '{"message":"CUSTOM_ERROR_MSG"}'
  }
});

The only problem I have with this solution is that changes to CfnGatewayResponse are not automatically deployed with cdk deploy, I have to press manually "Deploy API" in AWS Console.

connorjs · 2020-04-25T19:06:48Z

(1) What is the recommended way of enabling CORS pre-flight for APIG + Lambda proxy integration with the latest CDK? (I am using 1.33.0.)

It seems that defaultCorsPreflightOptions is a prop on ResourceOptions (a parent of LambdaRestApiProps), which I think neatly adds everything.

const api = new LambdaRestApi(this, "Api", {
  defaultCorsPreflightOptions: {
    allowOrigins: ["https://example.com"]
  },
  // ...other props
});

I think the answer to (1) is, "Yes, use defaultCorsPreflightOptions".

(2) However, does the recommendation change when an authorization type is added? As shown below, I have included IAM authorization which is also applied to the OPTIONS method. Unfortunately, this violates the CORS pre-flight contract or, at least, guarantees it will fail b/c the pre-flight OPTIONS request will not have credentials (per my understanding).

const api = new LambdaRestApi(this, "Api", {
  defaultCorsPreflightOptions: {
    allowOrigins: ["https://example.com"],
    allowCredentials: true
  },
  defaultMethodOptions: {
    authorizationType: AuthorizationType.IAM
  },
  // ...other props
});

Is there a way to "remove" the authorization type for a specific method (or set to NONE). More generally speaking, can the methods of a REST resource be mutated post-construction?

Alternatively, is there ever a valid case to restrict OPTIONS? (I'm still new to this, but I only see CORS pre-flight mentioned on MDN's OPTIONS doc.) If there are not use cases, can we update the APIG construct to not apply (ignore) the authorization type to OPTIONS methods?

In the mean-time, I'm going to continue use the hand-rolled solution. Thanks for the details on this thread so far everyone.

leantorres73 · 2020-05-07T21:29:16Z

I'm having the same issue, in SAM this was fixed while ago with a flag AddDefaultAuthorizerToCorsPreflight.
aws/serverless-application-model#958

leantorres73 · 2020-05-08T14:49:05Z

@connorjs What's the hand-rolled solution you're talking about? I tried the @smfontevan solution with no success (I'm still having CORS issues)

eladb · 2020-05-10T07:51:53Z

@leantorres73 @connorjs can you please raise a new issue so we can track this properly and get it fixed. It's harder for us to track as comments on a closed issue.

leantorres73 · 2020-05-12T15:27:34Z

@connorjs I have Cognito + API Gateway + Proxy integration + CORS working. It's not a real proxy anymore, but until there is an easy solution to disable security in OPTIONS, this is a way to go

    const proxy = api.root.addProxy({
      defaultIntegration: new apigateway.LambdaIntegration(handler),
      anyMethod: false
    });
    const authorizerConfig = {
      authorizer: {
        authorizerId: authorizer.ref
      },
      authorizationType: apigateway.AuthorizationType.COGNITO
    };
    proxy.addMethod('GET', undefined, authorizerConfig);
    proxy.addMethod('POST', undefined, authorizerConfig);
    proxy.addMethod('PUT', undefined, authorizerConfig);
    addCorsOptions(proxy);

eladb · 2020-05-19T07:17:33Z

@connorjs I have Cognito + API Gateway + Proxy integration + CORS working. It's not a real proxy anymore, but until there is an easy solution to disable security in OPTIONS, this is a way to go

    const proxy = api.root.addProxy({

      defaultIntegration: new apigateway.LambdaIntegration(handler),

      anyMethod: false

    });

    const authorizerConfig = {

      authorizer: {

        authorizerId: authorizer.ref

      },

      authorizationType: apigateway.AuthorizationType.COGNITO

    };

    proxy.addMethod('GET', undefined, authorizerConfig);

    proxy.addMethod('POST', undefined, authorizerConfig);

    proxy.addMethod('PUT', undefined, authorizerConfig);

    addCorsOptions(proxy);

Can you please a separate GitHub issue on this?

eladb added the feature label Oct 14, 2018

rix0rrr added feature-request A feature should be added or improved. and removed feature-request A feature should be added or improved. feature labels Nov 6, 2018

debora-ito added the @aws-cdk/aws-apigateway Related to Amazon API Gateway label Nov 7, 2018

rix0rrr added the gap label Jan 4, 2019

eladb self-assigned this Aug 12, 2019

ghost mentioned this issue Aug 29, 2019

API Gateway: missing features #723

Closed

12 tasks

eladb assigned nija-at and unassigned eladb Sep 3, 2019

SomayaB added management/tracking Issues that track a subject or multiple issues and removed gap labels Sep 24, 2019

eladb mentioned this issue Sep 25, 2019

feat(apigateway): cors preflight support #4211

Merged

mergify bot closed this as completed in #4211 Oct 17, 2019

aws locked and limited conversation to collaborators May 19, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

apigateway: add explicit support for CORS #906

apigateway: add explicit support for CORS #906

eladb commented Oct 11, 2018 •

edited

Loading

eladb commented Oct 24, 2018

FinnIckler commented Nov 7, 2018

kennu commented Nov 7, 2018

FinnIckler commented Nov 8, 2018

piotrkubisa commented Jan 18, 2019 •

edited

Loading

wmunyan commented Jan 18, 2019

piotrkubisa commented Jan 19, 2019

wmunyan commented Jan 19, 2019

justinThompson commented Apr 2, 2019

kennu commented Apr 7, 2019

justinThompson commented Apr 7, 2019

sankeyraut commented Jul 6, 2019

eladb commented Jul 7, 2019

hvital commented Jul 9, 2019

sankeyraut commented Jul 10, 2019

vegetabill commented Aug 19, 2019

ghost commented Aug 28, 2019

ghost commented Aug 29, 2019 •

edited by ghost

Loading

gadams999 commented Sep 3, 2019 •

edited

Loading

eladb commented Sep 20, 2019

eladb commented Sep 21, 2019

spaceemotion commented Sep 23, 2019

rix0rrr commented Sep 23, 2019

eladb commented Sep 23, 2019

spaceemotion commented Sep 23, 2019 •

edited

Loading

eladb commented Sep 23, 2019

moravcik commented Feb 14, 2020 •

edited

Loading

connorjs commented Apr 25, 2020

leantorres73 commented May 7, 2020

leantorres73 commented May 8, 2020

eladb commented May 10, 2020

leantorres73 commented May 12, 2020

eladb commented May 19, 2020

apigateway: add explicit support for CORS #906

apigateway: add explicit support for CORS #906

Comments

eladb commented Oct 11, 2018 • edited Loading

Requirements

Nice to Have

Non-Requirements

Resources

Notes

eladb commented Oct 24, 2018

FinnIckler commented Nov 7, 2018

kennu commented Nov 7, 2018

FinnIckler commented Nov 8, 2018

piotrkubisa commented Jan 18, 2019 • edited Loading

wmunyan commented Jan 18, 2019

piotrkubisa commented Jan 19, 2019

wmunyan commented Jan 19, 2019

justinThompson commented Apr 2, 2019

kennu commented Apr 7, 2019

justinThompson commented Apr 7, 2019

sankeyraut commented Jul 6, 2019

eladb commented Jul 7, 2019

hvital commented Jul 9, 2019

sankeyraut commented Jul 10, 2019

vegetabill commented Aug 19, 2019

ghost commented Aug 28, 2019

ghost commented Aug 29, 2019 • edited by ghost Loading

gadams999 commented Sep 3, 2019 • edited Loading

eladb commented Sep 20, 2019

eladb commented Sep 21, 2019

spaceemotion commented Sep 23, 2019

rix0rrr commented Sep 23, 2019

eladb commented Sep 23, 2019

spaceemotion commented Sep 23, 2019 • edited Loading

eladb commented Sep 23, 2019

moravcik commented Feb 14, 2020 • edited Loading

connorjs commented Apr 25, 2020

leantorres73 commented May 7, 2020

leantorres73 commented May 8, 2020

eladb commented May 10, 2020

leantorres73 commented May 12, 2020

eladb commented May 19, 2020

eladb commented Oct 11, 2018 •

edited

Loading

piotrkubisa commented Jan 18, 2019 •

edited

Loading

ghost commented Aug 29, 2019 •

edited by ghost

Loading

gadams999 commented Sep 3, 2019 •

edited

Loading

spaceemotion commented Sep 23, 2019 •

edited

Loading

moravcik commented Feb 14, 2020 •

edited

Loading