Request headers with S3 static website hosting React app with CloudFront

Question

I have a React app deployed to S3 with a CloudFront distribution on top of it for a specific domain CNAME. I want to be able to create a second CloudFront distribution for a separate, different domain but use the same S3 bucket as the origin.

However, in the React app I need to be able to know where the request came from so that the app can dynamically load different data based on that. I found that I can pass on a custom HTTP header from CloudFront to the origin, but that doesn't seem to be accessible from the React code that gets run in the browser.

Is there a way to do this with S3 and CloudFront?

Answer 1

I would recommend using React Router to handle rendering different components / data based on the route - the docs are quite excellent. I have a React app hosted in S3 behind a CF distribution using React Router and it works excellently.