1. Answers
  2. Adding CORS headers to CloudFront responses for S3 origins

How do I add CORS headers to CloudFront responses for S3 origins?

In this guide, we will create an AWS CloudFront distribution with an S3 origin and configure it to add CORS headers to responses. This will allow the resources served by CloudFront from the S3 bucket to be accessible from different origins, which is useful for enabling web applications to access resources across different domains.

We will use Pulumi to define and deploy the necessary infrastructure. The key components we will create are:

  1. An S3 bucket to serve as the origin.
  2. A CloudFront distribution with a response headers policy to add CORS headers.
import * as aws from "@pulumi/aws";
import * as awsNative from "@pulumi/aws-native";

// Create an S3 bucket to serve as the origin
const bucket = new aws.s3.Bucket("my-bucket");

// Define a response headers policy to add CORS headers
const responseHeadersPolicy = new aws.cloudfront.ResponseHeadersPolicy("myResponseHeadersPolicy", {
    corsConfig: {
        originOverride: true,
        accessControlAllowCredentials: false,
        accessControlAllowHeaders: {
            items: ["*"],
        },
        accessControlAllowMethods: {
            items: ["GET", "HEAD", "OPTIONS"],
        },
        accessControlAllowOrigins: {
            items: ["*"],
        },
        accessControlExposeHeaders: {
            items: [],
        },
        accessControlMaxAgeSec: 600,
    },
    name: "MyCORSResponseHeadersPolicy",
});

// Create a CloudFront distribution with the S3 bucket as the origin
const distribution = new aws.cloudfront.Distribution("myDistribution", {
    origins: [{
        domainName: bucket.bucketRegionalDomainName,
        originId: bucket.arn,
    }],
    defaultCacheBehavior: {
        targetOriginId: bucket.arn,
        viewerProtocolPolicy: "allow-all",
        responseHeadersPolicyId: responseHeadersPolicy.id,
        allowedMethods: ["GET", "HEAD", "OPTIONS"],
        cachedMethods: ["GET", "HEAD"],
        forwardedValues: {
            queryString: false,
            cookies: {
                forward: "none",
            },
        },
    },
    enabled: true,
    isIpv6Enabled: true,
    defaultRootObject: "index.html",
    priceClass: "PriceClass_100",
    restrictions: {
        geoRestriction: {
            restrictionType: "none",
        },
    },
    viewerCertificate: {
        cloudfrontDefaultCertificate: true,
    },
});

// Export the bucket name and distribution domain name
export const bucketName = bucket.bucket;
export const distributionDomainName = distribution.domainName;

Key Points

  • We created an S3 bucket to serve as the origin for the CloudFront distribution.
  • We defined a response headers policy to add CORS headers to the responses from CloudFront.
  • We created a CloudFront distribution with the S3 bucket as the origin and applied the response headers policy.

Summary

In this guide, we set up an AWS CloudFront distribution with an S3 origin and configured it to add CORS headers to responses. This setup allows resources served from the S3 bucket through CloudFront to be accessible from different origins, enabling cross-origin resource sharing.

Deploy this code

Want to deploy this code? Sign up for a free Pulumi account to deploy in a few clicks.

Sign up

New to Pulumi?

Want to deploy this code? Sign up with Pulumi to deploy in a few clicks.

Sign up