CORS between frontend and backend apps

Questions / Help
1

Hi,
I’m new to fly.io and successfully deployed a frontend and backend apps. My frontend app is now trying to hit my backend app endpoint using {backend_app_name}.internal:8080/v1/users/login but it returns CORS error Access to XMLHttpRequest at '{backend_app_name}.internal:8080/v1/users/login' from origin 'https://{frontend_app_name}.fly.dev' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
I tried adding http:// in front of the backend endpoint but it complains about https calling http which is not allowed. If I understand the internal network correctly, I thought it won’t allow https since flycast doesn’t support it. What’s the correct url I should hit? Thanks in advance.

P.S.: My backend service is running with Fastapi framework and I have my frontend url be added to the CORS allow_origins.

2

Are you hitting <app>.internal directly from the browser? If so, you can’t do that since .internal is only for intranetworking in your fly instances. You need to hit <backend>.fly.dev (or your app domain.) You need to allow CORS to your <frontend>.fly.dev origin.

3

Thank you for the reply.
Would like to confirm that does it mean I’ll need to set up http_service section with the internal_port=8080 in my backend fly.toml file so it will open to public network?

4

The internal port can be whatever. If your backend is specifically for your frontend app (ie it isn’t a public API service,) then you can keep it private. Your frontend api (eg /v1/users/login) can forward http request to http://<backend>.flycast:<port>/v1/users/login

5

Can frontend axios directly calling http://<backend>.flycast/v1/users/login if the page itself is https?
I tried to do it but it returns an error Mixed Content: The page at 'https://<frontend>.fly.dev/signin' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://<backend>.flycast/v1/users/login'. This request has been blocked; the content must be served over HTTPS.

This is part of the backend fly.toml

[http_service]
  internal_port = 8080
  # force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
  processes = ['app']
6

No, <app>.internal|flycast is internal, see: Private Networking · Fly Docs
You need to add example.com or <frontend>.fly.dev to your backend’s CORS policy.
Then your frontend browser can hit <backend>.fly.dev

1 Like
7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.