CORS between frontend and backend apps

I’m new to 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}' 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.

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> (or your app domain.) You need to allow CORS to your <frontend> origin.

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?

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

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>' 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

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

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

1 Like

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