API Gateway Rest API - 403 Errors Serving Static Content

Question

I have a Rest API Gateway sitting in front of an application load balancer which fronts a fargate service.
For rest calls / json responses - everything is returning fine.
However, 1 application I have running on fargate is a mixture of rest calls and static / dynamic html pages with lots of images and javascript files.

When I load the app via the load balancer (public alb for now) - it loads as expected.
However, when I try to load the app via the API Gateway stage endpoint - I get errors loading the javascript files and image files.

Here is the error message I receive when I try to call one of the javascript files in postman and in chrome
![Enter image description here](/media/postImages/original/IMA0Wi_ZC6T9OEeV8GsdjATg)

![Enter image description here](/media/postImages/original/IMrTNzRvbqToiksMpKD6stDg)

As you can see, the error is a 403 ForbiddenException. However, there is a message - Error from cloudfront.
I do not explicitly have cloudfront configured - is this something API Gateway does in the background?
Below are the routes I have configured for the application in API Gateway.
I tried a route starting with /js and a proxy underneath that but got the same error

![Enter image description here](/media/postImages/original/IMzvalp7i8QeWFlv0aNQKzdA)

Can anyone offer any guidance on how I could go about resolving this issue?

******* UPDATE ********

I just realised that the app is loading images / css / js from the ALB.  However, when API Gateway tries to render the asset, the stagename is not included and this is the issue.
How can we get API Gateway to prepend the stage name wheb an asset like this comes in?

[1]: https://i.stack.imgur.com/J8M3v.png
  [2]: https://i.stack.imgur.com/GeYII.png
  [3]: https://i.stack.imgur.com/6mH51.png

Giovanni Lauria · Answer

The issue you are seeing is likely due to how API Gateway handles static assets like images, JavaScript files etc differently than an Application Load Balancer.

When you make a request through API Gateway, it does not proxy the entire request to the backend. It handles the integration with the backend separately.

Check these:

* Make sure the backend Application Load Balancer is configured as a proxy integration in API Gateway. This will pass the entire request to the ALB.
* Check that the security groups allow traffic from API Gateway to the ALB on the necessary ports.
* As a workaround, you can host the static assets on S3 or CloudFront and update the URLs in your HTML/JS files to point to the S3/CloudFront endpoint instead of going through API Gateway.
* Consider using API Gateway private integrations if your backend is private. This allows private connectivity without going through a public endpoint.

API Gateway Rest API - 403 Errors Serving Static Content

Relevant content