1

I have a problem with AWS CloudFront and Nuxt Server Side Rendering

This are the components of my application:

  • Java backend, running on EC2
  • Nuxt frontend (Vue), running Server Side Rendering on API Gateway + Lambda + S3 (with Serverless Framework)

As an entry point of the application, I have a CloudFront distribution that splits the backend requests (/api/*) to the EC2 instance, and the frontend requests (default) to the API Gateway endpoint so the frontend is server side rendered by Lambda.

The frontend code performs an HTTP request to the backend to retrieve data, using the public CloudFront URL (because the render is hybrid, the first time is run server-side, but if the user navigates back to the home page it's rendered client-side).

So this is the invocation flow:

Browser => CloudFront (frontend path) => API Gateway => Lambda (render app) => CloudFront (backend path) => EC2

The Lambda function receives a 403 error ('x-cache': [ 'Error from cloudfront' ]) when invoking CloudFront, with no additional detail.

But if I browse the frontend in API Gateway directly (bypassing CloudFront), everything works:

Browser => API Gateway => Lambda (render app) => CloudFront (backend path) => EC2

I'm not understanding why invoking the Lambda function through CloudFront affects its ability to make an HTTP request to a CloudFront URL, or in other words why CloudFront reject that request.

Improve this question
4
  • Can you share the whole CloudFront & API Gateway configurations? I have a thought, but I want to see that before suggesting a solution. Commented Jul 14, 2020 at 14:29
  • 2
    Hi, thanks for your comment. Finally AWS support clarified the problem. There is a "Via" header where an extra value is added each time CF is involved, and there is a limitation that the header cannot include more than 2 CF references. The API Gateway generated by Serverless is Edge-Optimized, so it involves going through the nearest CF Edge Location, and the number of CF distributions involved in the request becomes 3, and that's not allowed. The solution was using a regional API Gateway instead of an Edge-Optimized API gateway, reducing by 1 the number of CF distributions involved. Commented Jul 15, 2020 at 12:57
  • @SantiagoMedina your comment has just saved me from a two-day long battle trying to figure out why CloudFront kept responding with a 403, whilst not even appending those responses to the access logs. Could you provide that comment as an answer and mark as correct so other souls can also be saved! Commented Mar 1, 2021 at 19:43
  • Glad it helped @MattInamdar, ok I will do that now Commented Mar 4, 2021 at 20:03

1 Answer 1

Reset to default
2

AWS support clarified the problem.

There is a "Via" header where an extra value is added each time CF is involved, and there is a limitation that the header cannot include more than 2 CF references.

The API Gateway generated by Serverless is Edge-Optimized, so it involves going through the nearest CF Edge Location, and the number of CF distributions involved in the request becomes 3, and that's not allowed.

The solution was using a regional API Gateway instead of an Edge-Optimized API gateway, reducing by 1 the number of CF distributions involved.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.