React app with fastapi backend without public exposure

Troubleshooting and help
,
1

Is there any recommendation how to connect fronted which is exposed to public in one service and is running on https with backend that should generally not be exposed and run in other service?

FE, which is posting requests on BE without exposure is running into “This request has been blocked; the content must be served over HTTPS”

Our setup:

  1. To seperate services running in 2 independent VM
  2. React FE, exposed over HTTPS
  3. BE preferably not exposed as from security point of view

Thanks for any help

2

Hi,

You can leverage our service mesh as described here. Service Discovery and Mesh | Koyeb

Deploy your frontend as a web service, deploy your backend as a private service (i.e., exposed port is not public). Use the private domain to reach the backend from the frontend.

Note that they should be both in the same region.

3

hey,

thanks for the answer.

Maybe I do not get something, but when I do exactly like that I get in the web app

auth.ts:72 Mixed Content: The page at 'https://webapp-coala.koyeb.app/dashboard/home' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://my-backend.webapp.internal:8081/api/auth/logout'. This request has been blocked; the content must be served over HTTPS.

Can i serve backend privately over https?

4

Hey!

It seems to me the call you’re trying to make to my-backend.webapp.internal:8081 is made by the browser, not your public service itself.

Are you sure this is made server-side? If yes, can you share the code responsible for that?

5

hey, you are right. I totally forgot about it. I guess there is no way around it. Thanks for help and support. Cheers