Using custom domain name for CloudFront Distribution with an HTTP API

Question

Hello folks,

Based on some examples I tried to setup a CloudFront distribution with a custom domain name and an HTTP API (Apigateway) as origin.
Unfortunately, I receive a 403 Forbidden when trying to access the Cloudfront distribution.
Also, when I try to setup everything manually in the AWS console, I don't get a ApiGateway listed in the list of possible origins for a distribution.

Here is my setup:

**DomainName:** example.com

**HTTP-API**
* Invoke URL: abc1.amazonaws.com
* Domain Endpoint: abc2.amazonaws.com
* Route53 A-Record: some-api.example.com

**CloudFront Distributon:**
* Endpoint: def1.cloudfront.net
* Alternative domain name: public.example.com
* Route53 Alias-Record: public.example.com
* Origin: some-api.example.com

**Certificates**
* Certificate in us-east-1 for CloudFront (example.com, *.example.com)
* Certificate in eu-central-1 for HTTP API (example.com, *.example.com)

✅ When accessing the HTTP API through its Route53 configured subdomain, the request works fine and the lambda behind it is invoked
```
curl --location --request GET 'https://some-api.example.com/test'
curl --location --request GET 'https://abc1.amazonaws.com/test'
```

🚫 When accessing the HTTP API through CloudFront's Route53 mapping OR through CloudFront's endpoint, its giving back a 403 Forbidden:
```
curl --location --request GET 'https://public.example.com/test' ===> {"message":"Forbidden"}
curl --location --request GET 'https://def1.cloudfront.net/test' ===> {"message":"Forbidden"}
```

**Behaviour Configuration in CloudFront**
![CloudFront Default Behaviour](/media/postImages/original/IMNh86nW9NRZ6u9Fs-LRCq9w)
![CloudFront Origin Settings](/media/postImages/original/IMCuBETU9lRv-zx3nrT5Z-zg)

**Account Setup**

I'm using this setup in a sub-account, managed by AWS Identity Center and having a Landing Zone that governs eu-central-1 and us-east-1 region.
The respective user I'm using for setting up everything has Administrator permissions.

I think, I followed those posts very closely but did I overlook something?
https://repost.aws/knowledge-center/api-gateway-domain-cloudfront
https://repost.aws/knowledge-center/api-gateway-authentication-token-errors

Paul_L · Answer

Usually for API Gateway origins you would need the AllViewerExceptHostHeader origin request policy.

This causes CloudFront to use the Origin domain name in the Host header when contacting the Origin, which is typically required by API Gateway.

EXPERT

Paul_L

answered a year ago

This causes CloudFront to use the Origin domain name in the Host header when contacting the Origin, which is typically required by API Gateway.

AWS-User-4223059 · Answer

Adding my experience to this. I currently cannot change my Origin Request Policy through the console, and the console shows the AllViewerExceptHostHeader policy as invalid. I can change it to AllViewer, but then I get the 403 Forbidden issue when Cloudfront attempts to send my request to my Api Gateway with a custom domain. To fix the issue, I have to switch the Origin Request Policy back to AllViewerExceptHostHeader again with Pulumi.

Enter image description here

Can an expert explain why AllViewerExceptHostHeader is being reported as incompatible with Api Gateway, when it is the only policy that works? And why AllViewer is being declared as the recommended policy, when it doesn't work?

![Enter image description here](/media/postImages/original/IM-yOHRJD4SH66CZIhw8jEjQ)

Can an expert explain why AllViewerExceptHostHeader is being reported as incompatible with Api Gateway, when it is the only policy that works? And why AllViewer is being declared as the recommended policy, when it doesn't work?

goosefraba · Answer

I think I made it work.
Despite the articles and descriptions found on the internet, I configured the origin to the execution domain of the HTTP Api rather then the domain name of it's mapping.

So in my case, I changed the origin from "some-api.example.com" to "abc1.amazonaws.com".
Before I tested the config with "abc2.amazonaws.com" (Domain name of the HTTP API domain mapping) and with "some-api.example.com" (Route53 Alias pointing to the HTTP API domain mapping).

Well, it works but not 100% as desired, I guess?

**It seems like this is the only working solution right now:**
1. *CloudFront-Origin -> HTTP API Execution domain.* OR
2. *CloudFront-Origin -> Custom Domain Name for HTTP API  (some-api.example.com)*

But for 1) then, I can not deactivate the execution domain of HTTP API hence it is still externally reachable

Using custom domain name for CloudFront Distribution with an HTTP API

Relevant content