5

I have an App Runner service running a NodeJS/Express server which is a REST API. App Runner has given me the following end point - https://example_server_random_id.awsapprunner.com

The frontend is developed using React and deployed in S3 as a static website. I have created a CloudFront distribution for serving the static content from S3 and have a default behavior (*). CloudFront has given me the following URL - https://cloud_front_ranom_id.cloudfront.net

So I have updated the backend code to support CORS and added the CloudFront URL as allowed origin. From the React app, I am using the App Runner URL as my base URL for all the API calls. This setup works perfectly.

Now, I wanted to get rid of CORS related setup by using the CloudFront distribution as a reverser proxy to my App Runner service. To do that, I have done following -

  1. I have added a custom origin that points to my App Runner service endpoint - https://example_server_random_id.awsapprunner.com

  2. I have created a new behavior (/api*) that has precedence 0, so it should be handling all the requests that have "/api" in its path instead of the default behavior (*). This behavior uses the custom origin that I have created in the previous step.

  3. I have allowed all the HTTP request (GET, POST, OPTION, PUT etc.) for this new behavior.

  4. For the new behavior, I have used "CachingDisabled" as the Cache Policy and "All Viewer" as the Origin Request Policy.

  5. I have replaced the base URL and use /api as the new base URL instead of the App Runner endpoint.

  6. I did not remove the CORS related settings from the backend code (access-control-allow-origin header value is the CloudFront endpoint and access-control-allow-credential header value is true).

This setup is not working as expected. I can still access the static contents but for all the requests to the backend (with /api base URL) give me the following errors -

Cannot POST /api/users/sign-in Status Code: 404
Cannot GET /api/users Status Code: 404
etc.

Can you please let me know if there is any way to debug this and what could be the problem in the setup?

Rasheduzzaman Sourov
  • 1,375
  • 2
  • 15
  • 36
  • Does your AppRunner instance also expect a /api prefix? Wondering if CF is receiving + forwarding a path such as /api/foo, and AppRunner is expecting /foo rather than /api/foo. – Cristian Jul 06 '22 at 18:52
  • @Cristian Its expecting /api/foo as I have added /api prefix in the router – Rasheduzzaman Sourov Jul 07 '22 at 05:00
  • The 404 indicates your AppRunner instance isn't returning a response for the request URL received through CloudFront. Have you tried 1/ making the /api/foo request directly to AppRunner, and 2/ logging the AppRunner requests received from CloudFront to inspect the incoming request and determine why your application is returning a 404? – Cristian Jul 07 '22 at 15:42
  • The app runner service is working fine if I directly access it using app runner end point. So the issue isnt there. What do you mean by logging the app runner requests received from cloudfront? I can only see the access log of my cloudfront distribution and that does not provide anything useful. – Rasheduzzaman Sourov Jul 07 '22 at 16:48
  • Look at the AppRunner (AR) logs, and find the requests originating from CloudFront (CF). If the direct request to AR works, then the issues is occurring when CF makes a request to AR to fetch the content. Being able to see the CF -> AR request will point you towards what in the request is causing the 404. – Cristian Jul 07 '22 at 20:43
  • 1
    Another potential consideration: Is AR expecting particular headers, cookies, or query strings to be forwarded from the viewer request to AR to return a 200 rather than a 404? If so, check your Cache/Origin request policies to ensure you have configured those values to pass from the viewer, through CF, to your origin. – Cristian Jul 07 '22 at 20:44
  • Changing the cache policy ultimately solved this problem. I changed the cache policy to legacy policy with following settings - Headers: None, Query String: All, Cookies: All. – Rasheduzzaman Sourov Jul 09 '22 at 03:43

1 Answers1

3

I am writing down how I fixed this in case someone faced the same issue.

The following article helped me to pinpoint the issue - https://advancedweb.hu/how-to-debug-cloudfront-origin-requests/

Basically, the problem was the cache policy I was using. I used the following webhook tester to find out the header values, query parameter and cookies and modified the cache policy to use the legacy cache settings (Appropriate header, cookies and query parameters)- https://webhook.site/

Rasheduzzaman Sourov
  • 1,375
  • 2
  • 15
  • 36