How to use same origin through AWS CloudFront
Updated Jan 16, 2026
This guide uses /metrics as an example of a same-origin path, but you can use any path you choose.
You should also use the URL of your server GTM container instead of https://sgtm.example.com.
Step 1: Create an origin for your CloudFront distribution
- Go to the CloudFront console.
- Click on your CloudFront distribution.
- Switch to the Origins tab.
- Click the Create origin button.
- Fill the Origin domain field with your Stape container domain, e.g., https://sst.example.com or you can use container default domain, e.g. https://abcdabcd.us.stape.io.
- From the Protocol radio buttons, select the HTTPS only option.
- Click the Add header button.
- Fill the Header name field with X-From-Cdn.
- Fill the Value field with the cft-stape.
- Click the Create origin button.
Step 2: Create a behavior for your CloudFront distribution
- Switch to the Behaviors tab.
- Click the Create behavior button.
- Fill the Path pattern field with your custom path prefix, e.g., /metrics/*.
- From the Origin and origin groups dropdown, select the origin added in the previous step.
- From the Viewer protocol policy radio buttons, select the HTTPS only option.
- From the Cache policy dropdown, from the Managed section, select the UserAgentRefererHeaders policy.
- Click the Save changes button.
Step 3: Adjust your deployed script
Create and deploy a Lambda@Edge function:
- Go to the Lambda console.
- Click the Create function button.
- Fill the Function name field with a descriptive name.
- For the Runtime dropdown, ensure that the Node.js 22.x runtime is selected.
- Expand the Change default execution role section.
- For the Execution role radio buttons, select the Create a new role from AWS policy templates option.
- Fill the Role name field with a descriptive name.
- From the Policy templates - optional dropdown, select the Basic Lambda@Edge permissions (for CloudFront trigger) template.
- Click the Create function button.
- Use the following code for the function (ensure that the path prefix in the code matches the behavior path pattern prefix):
export const handler = async (event) => {
const request = event.Records[0].cf.request;
// set 'Host' header to origin domain name
request.headers.host = [{ key: 'Host', value: request.origin.custom.domainName }];
// trim '/metrics' prefix from request URI
if (request.uri.startsWith('/metrics')) {
request.uri = request.uri.replace(/^\/metrics/, '');
}
return request;
};
- Click the Deploy button.
- From the Actions dropdown, select the Deploy to Lambda@Edge option.
- From the Distribution dropdown, select your CloudFront distribution.
- From the Cache behavior dropdown, select the behavior added previously.
- For the CloudFront event dropdown, ensure that the Origin request option is selected.
- Check the Confirm deploy to Lambda@Edge checkbox.
- Click the Deploy button.
- Wait for the Lambda@Edge function and CloudFront distribution to be deployed.
You can verify the proxy is working by opening your proxy path in the browser. Go to https://sgtm.example.com/metrics. If you see error 400, then everything is working correctly. You can also run a preview of the server container on your /metrics path.
After following these steps, add your /path for the same origin to the Custom Loader's settings. Check the article on Same Origin Path to do this.
If you are not using your own subdomain and are proxying requests to the standard Stape subdomain, you also need to add the X-Stape-Host header with the value of the host where the events are taking place (for instance, X-Stape-Host: www.example.com).
Comments