I would like to setup my S3 bucket to rewrite the path of the route /api to a API Gateway URL.
So take the following:
User goes to website bacon.com
Website goes from Cloudflare DNS to S3 bucket
Website is a react app
React app makes a call to api which is bacon.com/api
S3 rewrites /api path to api gateway url https://ljsdflkjlsdk.execute-api.us-east-1.amazonaws.com/dev
I was able to get this to work here:
however, it forwards the URL to that API gateway URL which is not desired.
I'm not entirely sure this is possible. I'm thinking it might require either me implementing something like Route53 or writing a cloudflare worker to handle the rewrite?
Thanks in advance for your help!
So you want to proxy requests to the /api path to your backend API, while other routes, e.g. /login are served by the React app.
I may be wrong but I think neither S3 (as a static hosting provider) nor Route 53 (as a DNS tool) can help with that.
Since you mentioned you're already using Cloudflare, you can do this with CF Workers with little effort though!
Make sure bacon.com is proxied by CF (orange cloud ON on DNS tab)
Create a new worker with this code:
const backendUrl = "https://ljsdflkjlsdk.execute-api.us-east-1.amazonaws.com/dev"
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
/**
* Respond to the request
* #param {Request} request
*/
async function handleRequest(request) {
return fetch(backendUrl, request)
}
Associate the worker with the /api path on the Workers tab for the bacon.com
bacon.com/api is now a proxy sending requests to the backend url!
Related
I have 2 setup,
1) Cloud-Front -> Api-Gateway -> Lambda
2) Cloud-Front -> S3 bucket (enabled web server) -> static UI files
Now is there any way to block my 1st cloud front url to allow request only from my UI cloud-front domain name? i.e If the browser is making a backend api call then it should work. But if the same api call is made from POSTMAN / CURL outside of browser then it should be blocked.
I tried enabling CORS with specific domain name, it is not blocking the request when we do from "Curl"
One way would be to setup WAF for your CF domain to filter incoming requests using Referer header. This process is explained in:
How to Prevent Hotlinking by Using AWS WAF, Amazon CloudFront, and Referer Checking
You could also do the same with using lambda#edge or CF functions, if you don't want to use WAF.
I'm fairly noob and new to AWS, but I've been stuck on a bug.
I have a React App hosted as Static Website on A S3 Bucket with a Cloudfront distributions setup for it so it is secured with SSL. I also have a NodeJS/express Backend hosted on EC2 with a SSL certificate that I made myself and the EC2 is all set up to receive HTTPS request(I added a load balancer to handle HTTPS request).
Here is the twist. So basically in React project config, I have the Backend URL like this :https://long-url-to-ec2..... , you get the vibe.
So I basically have 2 environments, the React App in the S3 bucket (the unsecured app) and the React App in Cloudfront which is secured. But the problem is that in the S3 Bucket version of my app, all of my request are sent to https://my-backend but in the Cloudfront version, the request are only sent to http://my-backend . Cloudfront seems to not care about the URL and just send all of my request through HTTP even if https is specified in the URL!
Does anybody know what do I have to setup In Cloudfront so it sends my request to the good HTTPS URL and not just HTTP?
Whether you use the S3 url or the CloudFront url, it's the same React app which is hosted in S3. The issue is when your react app calls the backend, which is just an ALB url, correct? So it must be an issue with your react code. You define in your react app how you call the backend. It's got nothing to do with CloudFront.
Although I'm a bit confused how you could have different results when using the S3 url and the CloudFront url. Ultimately it's the exact same react app that calls the backend. You should start with the question of how you call the backend from your react app. The exact piece of code you're using. That should give you a clue.
Context: I have a 3rd party application running in an EC2 instance via HTTP, and a Cloudfront distribution placed infront for caching and to serve the app via HTTPS.
Website URL: https://elvis.********.com
Problem: I don't have much control over the 3rd party application - but it makes an api call to my app via http. Since the website is hosted over https, this causes an error blocked:mixed-content
(The 3rd party app makes a server call to itself, but via http - See Request URL and Origin)
In this case, shouldn't Cloudfront route this to API call from HTTP to HTTPS? It is a call to the same URL & Server after all.
Wondering if adding a Lambda#Edge function would help (viewer-request | viewer-response | origin-request | origin-response?). But i'm quite skeptical as it looks like the browser blocks the request immediately.
Any insights would be appreciated.
Thanks!
Cloudfront does not do the protocol switching or delegation. This error is coming from the browser and it clearly says it does not allow mixed content. To fix this, you need to host your endpoint on https. If you are using AWS for your endpoint hosting, then it is easy to set up a load balancer with HTTPS certificate. Or you can set up another Cloudfront endpoint for your application origin.
I have s3 serving my React App. Whats the best way to redirect any requests that have /api in the url to my webserver. Currently my CORS config in S3 redirects GET only and I know this is not the correct way to handle api endpoints.
somedomain.com -> serve static s3 react app
somedomain.com/api -> send requests to webapp (hosted at api.somedomain.com)
My other option is to just let nginx handle serving the app and api.
Use Cloud Front and Change the incoming patterns to different origin.
A static website hosted on Bitbucket will only allow (and redirect) GET requests.
I'd recommend you set the api.somedomain.com as your api endpoint in your JS. This would avoid the need for the /api route.
I have a custom domain and I managed to redirect the naked(apex) domain to www subdomain using S3 static website hosting redirect over http. (Without using Cloudfront) (http:// ...)
AWS S3 redirect window
Now that I have setup SSL certificate at my server, my redirect url is secured. And I wish to redirect all the traffic from apex domain to this secured url now. (https:// ...)
On first thought, I changed the protocol in the S3 static website redirect config to https, but it doesn't seem to work as expected.
Documents and other links suggest that I need to make use of Amazon Cloud Front and setup certificate and then the redirection would happen (haven't tried yet).
My question is, since I have setup the certificate at my server, the url I am redirecting to is already secured, I do not wish to do the same in Cloud front. Is there a way I can redirect all traffic from to a secured url without setting up cloud front?
Update 1:
Well S3 changes took their own good time in reflecting with changes.
The protocol redirect to https seems to work now.
It took more than a day's time to reflect the changes.
In my experience, it usually takes 8 hours for DNS related change to reflect. But this redirection took a bit more than usual.
Anyone looking for how to do it :
This is all you need to do