SSL with cloudflare and AWS s3 and ELB

I have the following setup

client browser -----> ----->S3---->ELB-------->Backend1 and Backend2 instances

My setup has REACTJS production build sitting on S3. The REACTJS makes calls to backend API via call to the AWS Load balancer (ELB) e.g.

GET/POST request to
The load balancer sends request to one of the backend server
I am not using Cloudfront/Route 53.

My DNS configuration in my Cloudflare account
CNAME … myapp… s3bucket URL that holds production reactjs files

My HTTP requests are going correctly.
I need to understand how to get HTTPS request through right from ----------------------------->

The load balancer should then decrypt and call the respective APIs

I have Cloudflare origin certificate for * which i have configured on ELB

How can I ensure SSL installation from browser to ELB

Your design is clear but I’m not sure what is your concern.

If I understand correctly, your app is gonna make requests to another address of you which is not proxied via CF. Then you need take care of that yourself or proxy it via CF.

I am unable to get HTTPS to work

Browser renders but when I try to login i.e make a POST call to the backend

vendor.js:1 Mixed Content: The page at ‘’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘’. This request has been blocked; the content must be served over HTTPS.

This makes me believe I need to use SSL even on my backend server which is running rails on port 3000.
Currently ELB configuration is

ELB proto : HTTPS
ELB Port: 443
Instance proto: HTTP
Instance port: 3000

And my backend is not using any certs.

Yes you need one (for any request made by browser you need a secure connection). That’s an AWS question. After setting that SSL your next problem is cross origin requests.


U r bang on…I think OPTIONS and not POST is kindof indicating CORS…

I am using Cloudflare origin certificate…so should be valid

You mean for

Then still the javascript is loaded into the page from and tries to send request to and that is cross origin and browsers will block such a request. Google for How to add CORS header and do that is so you tell the browser that the other address is trusted (don’t use *).

Thanks will try to add CORS

1 Like

To work around CORS I modified my javascript code to use
and thought of mapping api in Cloudflare to my AWS instances

I was hence thinking of
(a) Cloudflare ([dns]) ---------> nginx -------> AWS ELB

I read about using NGINX as reverse proxy to avoid CORS but realised that Cloudflare itself
works as proxy

But then decided to use the following configuration

(b) Cloudflare([dns+proxy] orange cloud) <---------------> AWS ELB
added CNAME entry where I map api <.----------->AWS ELB.

Using (b) above, I created a origin certificate under SSL/TLS app of Cloudflare
and I read that we can use that certificate at entry point of AWS which is my ELB

So I expected
a) Browser invokes (Points to s3 where frontend resides)

b) This fetches the javascript code and we make login API call

c) api is on Cloudflare which maps to AWS ELB and AWS ELB is configured to receive HTTPS on port 443 using the Cloudflare origin certificate

I am getting 521 error. Web server is down, when I access on the browser
Am I on the right track

When I had a similar error recently - I found that the structure within this file was not correct. Even though I had copied and pasted it correctly - for some reason it was borked. Until I directly uploaded file to server and cleared Cloudflare cache after.


My recent experience is this issue is a configuration problem.

I use Amazon Lightsail as host.

This topic was automatically closed after 30 days. New replies are no longer allowed.