Enable CORS on S3 Bucket (#1026)

Author: edwardfoyle

.changeset/loud-sheep-occur.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/backend-storage': patch
+---
+
+Enable CORS on the S3 Bucket

.eslint_dictionary.json

@@ -21,6 +21,7 @@
   "cognito",
   "commonjs",
   "corepack",
+  "cors",
   "ctor",
   "darwin",
   "datastore",

packages/backend-storage/src/construct.test.ts

@@ -42,6 +42,32 @@ void describe('AmplifyStorage', () => {
     );
   });
 
+  void it('enables cors on the bucket', () => {
+    const app = new App();
+    const stack = new Stack(app);
+    new AmplifyStorage(stack, 'testAuth', { name: 'testName' });
+
+    const template = Template.fromStack(stack);
+    template.hasResourceProperties('AWS::S3::Bucket', {
+      CorsConfiguration: {
+        CorsRules: [
+          {
+            AllowedHeaders: ['*'],
+            AllowedMethods: ['GET', 'HEAD', 'PUT', 'POST', 'DELETE'],
+            AllowedOrigins: ['*'],
+            ExposedHeaders: [
+              'x-amz-server-side-encryption',
+              'x-amz-request-id',
+              'x-amz-id-2',
+              'ETag',
+            ],
+            MaxAge: 3000,
+          },
+        ],
+      },
+    });
+  });
+
   void describe('storeOutput', () => {
     void it('stores output using the provided strategy', () => {
       const app = new App();

packages/backend-storage/src/construct.ts

@@ -1,5 +1,11 @@
 import { Construct } from 'constructs';
-import { Bucket, BucketProps, EventType, IBucket } from 'aws-cdk-lib/aws-s3';
+import {
+  Bucket,
+  BucketProps,
+  EventType,
+  HttpMethods,
+  IBucket,
+} from 'aws-cdk-lib/aws-s3';
 import {
   BackendOutputStorageStrategy,
   ConstructFactory,
@@ -57,6 +63,26 @@ export class AmplifyStorage
 
     const bucketProps: BucketProps = {
       versioned: props.versioned || false,
+      cors: [
+        {
+          maxAge: 3000,
+          exposedHeaders: [
+            'x-amz-server-side-encryption',
+            'x-amz-request-id',
+            'x-amz-id-2',
+            'ETag',
+          ],
+          allowedHeaders: ['*'],
+          allowedOrigins: ['*'],
+          allowedMethods: [
+            HttpMethods.GET,
+            HttpMethods.HEAD,
+            HttpMethods.PUT,
+            HttpMethods.POST,
+            HttpMethods.DELETE,
+          ],
+        },
+      ],
     };
     this.resources = {
       bucket: new Bucket(this, 'Bucket', bucketProps),