CORS configuration in AWS - Commands & Configuration

Introduction

Sometimes, web browsers block requests from one website to another for security. CORS configuration lets you tell browsers which websites can talk to your AWS resources safely.

When you want a web app hosted on one domain to access an AWS API on another domain.

When your frontend JavaScript needs to read data from an AWS S3 bucket in a different domain.

When you want to allow specific websites to upload files directly to your AWS S3 bucket.

When you want to prevent unauthorized websites from accessing your AWS resources.

When you want to enable safe sharing of resources between different web applications.

Config File - cors.json

cors.json

{
  "CORSRules": [
    {
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET", "POST", "PUT"],
      "AllowedOrigins": ["https://example.com"],
      "ExposeHeaders": ["ETag"],
      "MaxAgeSeconds": 3000
    }
  ]
}

This JSON file sets CORS rules for an AWS S3 bucket.

• AllowedOrigins: Which websites can access the bucket.
• AllowedMethods: What actions are allowed (like GET to read, POST to upload).
• AllowedHeaders: Which headers the browser can send.
• ExposeHeaders: Which headers the browser can see in the response.
• MaxAgeSeconds: How long browsers can remember these rules.

Commands

This command applies the CORS rules from the cors.json file to the S3 bucket named my-example-bucket.

Terminal

aws s3api put-bucket-cors --bucket my-example-bucket --cors-configuration file://cors.json

Expected Output

No output (command runs silently)

→

--bucket - Specifies the name of the S3 bucket to configure.

→

--cors-configuration - Points to the JSON file with the CORS rules.

This command retrieves and shows the current CORS configuration of the S3 bucket to verify the settings.

Terminal

aws s3api get-bucket-cors --bucket my-example-bucket

Expected Output

{

    "CORSRules": [

        {

            "AllowedHeaders": [

                "*"

            ],

            "AllowedMethods": [

                "GET",

                "POST",

                "PUT"

            ],

            "AllowedOrigins": [

                "https://example.com"

            ],

            "ExposeHeaders": [

                "ETag"

            ],

            "MaxAgeSeconds": 3000

        }

    ]

}

→

--bucket - Specifies the name of the S3 bucket to check.

Key Concept

If you remember nothing else from this pattern, remember: CORS rules tell browsers which websites can safely access your AWS resources.

Common Mistakes

Using '*' as AllowedOrigins to allow all websites.

This can expose your resources to any website, causing security risks.

Specify only the trusted website URLs in AllowedOrigins.

Not including the correct HTTP methods in AllowedMethods.

Requests using methods not listed will be blocked by the browser.

List all HTTP methods your application needs, like GET, POST, PUT.

Forgetting to apply the CORS configuration after editing the JSON file.

Changes won't take effect until you run the command to update the bucket.

Always run the put-bucket-cors command after changing the config file.

Summary

Create a JSON file with CORS rules specifying allowed origins, methods, and headers.

Use the AWS CLI put-bucket-cors command to apply these rules to your S3 bucket.

Verify the configuration with get-bucket-cors to ensure your settings are active.