feat: scope API Gateway and Lambda origin to CloudFront domain

Author: jdebuseamazon

docs/src/content/docs/en/guides/fastapi.mdx

@@ -490,26 +490,7 @@ This sets up:
 5. X-Ray tracing configuration
 6. CloudWatch metrics namespace
 
-:::note
-If your solution includes a website you can configure its CloudFront distribution as the only permitted CORS origin in the API gateway / API AWS Lambda integrations for HTTP / REST APIs.
-You will need to create the API and then call the API `grantCorsFrom` method with the created website.
-
-```ts
-import { MyApi, MyWebsite } from ':my-scope/common-constructs';
-
-export class ExampleStack extends Stack {
-  constructor(scope: Construct, id: string) {
-    const api = new MyApi(this, 'MyApi', {
-      integrations: MyApi.defaultIntegrations(this).build(),
-    });
-    const website = new MyWebsite(this, 'MyWebsite');
-    api.grantCorsFrom(website);
-  }
-}
-```
-
-The `MyWebsite` construct can be generated using the <Link path="/guides/react-website">`ts#react-website` generator</Link>
-:::
+<Snippet name="api/cors-configuration-cdk-note" />
 
 :::note
 If you selected to use `Cognito` authentication, you will need to supply the `identity` property to the API construct:
@@ -563,27 +544,7 @@ This sets up:
 5. X-Ray tracing configuration
 6. CORS configuration
 
-:::note
-If your solution includes a Terraform website module then you can use its CloudFront domain name to restrict CORS.
-Given a CloudFront domain name `<domain_name>`, within the Terraform module for deploying your API add
-- a `cors_allow_origins` property, set to `["http://localhost:4200", "http://localhost:4300", "https://<domain name>"]`, for HTTP APIs. This restricts the API gateway CORS to this distribution and local host.
-- an `ALLOWED_ORIGINS` environment variable, set to `"https://<domain_name>"`, for REST APIs. This sets the CloudFront distribution as the only permitted CORS origin (other than local host) in AWS Lambda integrations.
-
-```hcl {4,7}
-module "my_api" {
-  source = "../../common/terraform/src/app/apis/my-api"
-
-  cors_allow_origins = ["http://localhost:4200", "http://localhost:4300", "https://<domain name>"] // Only required for HTTP API
-
-  env = {
-    ALLOWED_ORIGINS = "https://<domain name>" // Only required for REST API
-    ENVIRONMENT = var.environment
-    LOG_LEVEL   = "INFO"
-  }
-}
-```
-The `MyWebsite` construct can be generated using the <Link path="/guides/react-website">`ts#react-website` generator</Link>
-:::
+<Snippet name="api/cors-configuration-terraform-note" />
 
 :::note
 If you selected to use `Cognito` authentication, you will need to supply the Cognito configuration:

docs/src/content/docs/en/guides/trpc.mdx

@@ -425,26 +425,7 @@ export class ExampleStack extends Stack {
 
 This sets up your API infrastructure, including an AWS API Gateway REST or HTTP API, AWS Lambda functions for business logic, and authentication based on your chosen `auth` method.
 
-:::note
-If your solution includes a website you can configure its CloudFront distribution as the only permitted CORS origin in the API gateway / API AWS Lambda integrations for HTTP / REST APIs.
-You will need to create the API and then call the API `grantCorsFrom` method with the created website.
-
-```ts
-import { MyApi, MyWebsite } from ':my-scope/common-constructs';
-
-export class ExampleStack extends Stack {
-  constructor(scope: Construct, id: string) {
-    const api = new MyApi(this, 'MyApi', {
-      integrations: MyApi.defaultIntegrations(this).build(),
-    });
-    const website = new MyWebsite(this, 'MyWebsite');
-    api.grantCorsFrom(website);
-  }
-}
-```
-
-The `MyWebsite` construct can be generated using the <Link path="/guides/react-website">`ts#react-website` generator</Link>
-:::
+<Snippet name="api/cors-configuration-cdk-note" />
 
 :::note
 If you selected to use `Cognito` authentication, you will need to supply the `identity` property to the API construct:
@@ -498,27 +479,7 @@ This sets up:
 5. X-Ray tracing configuration
 6. CORS configuration
 
-:::note
-If your solution includes a Terraform website module then you can use its CloudFront domain name to restrict CORS.
-Given a CloudFront domain name `<domain_name>`, within the Terraform module for deploying your API add
-- a `cors_allow_origins` property, set to `["http://localhost:4200", "http://localhost:4300", "https://<domain name>"]`, for HTTP APIs. This restricts the API gateway CORS to this distribution and local host.
-- an `ALLOWED_ORIGINS` environment variable, set to `"https://<domain_name>"`, for REST APIs. This sets the CloudFront distribution as the only permitted CORS origin (other than local host) in AWS Lambda integrations.
-
-```hcl {4,7}
-module "my_api" {
-  source = "../../common/terraform/src/app/apis/my-api"
-
-  cors_allow_origins = ["http://localhost:4200", "http://localhost:4300", "https://<domain name>"] // Only required for HTTP API
-
-  env = {
-    ALLOWED_ORIGINS = "https://<domain name>" // Only required for REST API
-    ENVIRONMENT = var.environment
-    LOG_LEVEL   = "INFO"
-  }
-}
-```
-The `MyWebsite` construct can be generated using the <Link path="/guides/react-website">`ts#react-website` generator</Link>
-:::
+<Snippet name="api/cors-configuration-terraform-note" />
 
 :::note
 If you selected to use `Cognito` authentication, you will need to supply the Cognito configuration:

docs/src/content/docs/en/guides/ts-smithy-api.mdx

@@ -405,26 +405,7 @@ This sets up:
 4. CloudWatch log group
 5. X-Ray tracing configuration
 
-:::note
-If your solution includes a website you can configure its CloudFront distribution as the only permitted CORS origin in the API gateway / API AWS Lambda integrations for HTTP / REST APIs.
-You will need to create the API and then call the API `grantCorsFrom` method with the created website.
-
-```ts
-import { MyApi, MyWebsite } from ':my-scope/common-constructs';
-
-export class ExampleStack extends Stack {
-  constructor(scope: Construct, id: string) {
-    const api = new MyApi(this, 'MyApi', {
-      integrations: MyApi.defaultIntegrations(this).build(),
-    });
-    const website = new MyWebsite(this, 'MyWebsite');
-    api.grantCorsFrom(website);
-  }
-}
-```
-
-The `MyWebsite` construct can be generated using the <Link path="/guides/react-website">`ts#react-website` generator</Link>
-:::
+<Snippet name="api/cors-configuration-cdk-note" />
 
 :::note
 If you selected `Cognito` authentication, you will need to supply the `identity` property to the API construct:
@@ -478,27 +459,7 @@ This sets up:
 5. X-Ray tracing configuration
 6. CORS configuration
 
-:::note
-If your solution includes a Terraform website module then you can use its CloudFront domain name to restrict CORS.
-Given a CloudFront domain name `<domain_name>`, within the Terraform module for deploying your API add
-- a `cors_allow_origins` property, set to `["http://localhost:4200", "http://localhost:4300", "https://<domain name>"]`, for HTTP APIs. This restricts the API gateway CORS to this distribution and local host.
-- an `ALLOWED_ORIGINS` environment variable, set to `"https://<domain_name>"`, for REST APIs. This sets the CloudFront distribution as the only permitted CORS origin (other than local host) in AWS Lambda integrations.
-
-```hcl {4,7}
-module "my_api" {
-  source = "../../common/terraform/src/app/apis/my-api"
-
-  cors_allow_origins = ["http://localhost:4200", "http://localhost:4300", "https://<domain name>"] // Only required for HTTP API
-
-  env = {
-    ALLOWED_ORIGINS = "https://<domain name>" // Only required for REST API
-    ENVIRONMENT = var.environment
-    LOG_LEVEL   = "INFO"
-  }
-}
-```
-The `MyWebsite` construct can be generated using the <Link path="/guides/react-website">`ts#react-website` generator</Link>
-:::
+<Snippet name="api/cors-configuration-terraform-note" />
 
 :::note
 If you selected `Cognito` authentication, you will need to supply the Cognito configuration:

docs/src/content/docs/en/snippets/api/cors-configuration-cdk-note.mdx

@@ -0,0 +1,25 @@
+---
+title: CORS configuration CDK
+---
+import Link from '@components/link.astro';
+
+:::note
+If your solution includes a website you can configure its CloudFront distribution as the only permitted CORS origin in the API gateway / API AWS Lambda integrations for HTTP / REST APIs. Note that this restriction is not applied to preflight OPTIONS for REST APIs.
+You will need to create the API and then call the API `restrictCorsTo` method with the created website.
+
+```ts
+import { MyApi, MyWebsite } from ':my-scope/common-constructs';
+
+export class ExampleStack extends Stack {
+  constructor(scope: Construct, id: string) {
+    const api = new MyApi(this, 'MyApi', {
+      integrations: MyApi.defaultIntegrations(this).build(),
+    });
+    const website = new MyWebsite(this, 'MyWebsite');
+    api.restrictCorsTo(website);
+  }
+}
+```
+
+The `MyWebsite` construct can be generated using the <Link path="/guides/react-website">`ts#react-website` generator</Link>
+:::

docs/src/content/docs/en/snippets/api/cors-configuration-terraform-note.mdx

@@ -0,0 +1,26 @@
+---
+title: CORS configuration Terraform
+---
+import Link from '@components/link.astro';
+
+:::note
+If your solution includes a Terraform website module then you can use its CloudFront domain name to restrict CORS.
+Given a CloudFront domain name `<domain_name>`, within the Terraform module for deploying your API add
+- a `cors_allow_origins` property, set to `["http://localhost:4200", "http://localhost:4300", "https://<domain name>"]`, for HTTP APIs. This restricts the API gateway CORS to this distribution and local host.
+- an `ALLOWED_ORIGINS` environment variable, set to `"https://<domain_name>"`, for REST APIs. This sets the CloudFront distribution as the only permitted CORS origin (other than local host) in AWS Lambda integrations. Note that this restriction is not applied to preflight OPTIONS.
+
+```hcl {4,7}
+module "my_api" {
+  source = "../../common/terraform/src/app/apis/my-api"
+
+  cors_allow_origins = ["http://localhost:4200", "http://localhost:4300", "https://<domain name>"] // Only required for HTTP API
+
+  env = {
+    ALLOWED_ORIGINS = "https://<domain name>" // Only required for REST API
+    ENVIRONMENT = var.environment
+    LOG_LEVEL   = "INFO"
+  }
+}
+```
+The `MyWebsite` construct can be generated using the <Link path="/guides/react-website">`ts#react-website` generator</Link>
+:::

packages/nx-plugin/src/py/fast-api/__snapshots__/generator.spec.ts.snap

@@ -436,21 +436,22 @@ export class TestApi<
   }
 
   /**
-   * Grants CORS to this API from the CloudFront distribution domain
+   * Restricts CORS to the website CloudFront distribution domains
    *
-   * Configures the CloudFront distribution domain as the only permitted CORS origin
+   * Configures the CloudFront distribution domains as the only permitted CORS origins
    * (other than local host with default ports) in the API gateway
-   * The CORS origin is not configured within the AWS Lambda integrations since
+   * The CORS origins are not configured within the AWS Lambda integrations since
    * the associated header is controlled by API Gateway v2
    *
    * @param cloudFrontDistribution - The CloudFront distribution to grant CORS from
    */
-  public grantCorsFrom({
-    cloudFrontDistribution,
-  }: {
-    cloudFrontDistribution: Distribution;
-  }) {
-    const allowedOrigin = \`https://\${cloudFrontDistribution.distributionDomainName}\`;
+  public restrictCorsTo(
+    ...websites: { cloudFrontDistribution: Distribution }[]
+  ) {
+    const allowedOrigins = websites.map(
+      ({ cloudFrontDistribution }) =>
+        \`https://\${cloudFrontDistribution.distributionDomainName}\`,
+    );
 
     const cfnApi = this.api.node.defaultChild;
     if (!(cfnApi instanceof CfnApi)) {
@@ -463,7 +464,7 @@ export class TestApi<
       allowOrigins: [
         'http://localhost:4200',
         'http://localhost:4300',
-        allowedOrigin,
+        ...allowedOrigins,
       ],
       allowMethods: [CorsHttpMethod.ANY],
       allowHeaders: [
@@ -980,24 +981,29 @@ export class TestApi<
   }
 
   /**
-   * Grants CORS to this API from the CloudFront distribution domain
+   * Restricts CORS to the website CloudFront distribution domains
    *
-   * Configures the CloudFront distribution domain as the only permitted CORS origin
+   * Configures the CloudFront distribution domains as the only permitted CORS origins
    * (other than local host) in the AWS Lambda integrations
    *
-   * @param cloudFrontDistribution - The CloudFront distribution to grant CORS from
+   * Note that this restriction is not applied to preflight OPTIONS
+   *
+   * @param websites - The CloudFront distribution to grant CORS from
    */
-  public grantCorsFrom({
-    cloudFrontDistribution,
-  }: {
-    cloudFrontDistribution: Distribution;
-  }) {
-    const allowedOrigin = \`https://\${cloudFrontDistribution.distributionDomainName}\`;
+  public restrictCorsTo(
+    ...websites: { cloudFrontDistribution: Distribution }[]
+  ) {
+    const allowedOrigins = websites
+      .map(
+        ({ cloudFrontDistribution }) =>
+          \`https://\${cloudFrontDistribution.distributionDomainName}\`,
+      )
+      .join(',');
 
     // Set ALLOWED_ORIGINS environment variable for all Lambda integrations
     Object.values(this.integrations).forEach((integration) => {
       if ('handler' in integration && integration.handler instanceof Function) {
-        integration.handler.addEnvironment('ALLOWED_ORIGINS', allowedOrigin);
+        integration.handler.addEnvironment('ALLOWED_ORIGINS', allowedOrigins);
       }
     });
   }