CORS blocks API requests from frontend to backend app with internal ingress.

[tgram-3D]

Please provide us with the following information:

This issue is a: (mark with an x)

• [x] bug report -> please search issues before submitting
• [ ] documentation issue or request
• [ ] regression (a behavior that used to work and stopped in a new release)

Issue description

I have a frontend and backend container in my containerapps environment, frontend is React-TS built with Vite & served with nginx, and backend API is Python/FastAPI. The app works fine when ingress is set to external on the backend - I have the CORS origin set for the frontend fqdn in ACA CORS and FastAPI CORS Middleware - but when I flip ingress to internal, which should still work according to the ACA examples, I get:

Access to XMLHttpRequest at 'https://backend.{randomname}-{id}.centralus.azurecontainerapps.io/api/' from origin 'https://frontend.{randomname}-{id}.centralus.azurecontainerapps.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried it with setting allowed CORS origins to all in ACA and got the same error. I also tried just using the app name for the requests e.g. https://backend and got same error. I certainly could be missing something but I'm not sure what, and this seemed odd enough to submit an issue since everything works just fine with external ingress.

Steps to reproduce

1. Change ingress to internal on backend containerapp

Expected behavior [Frontend app in the same environment can send requests to backend app with internal ingress without CORS origin error. CORS config works fine when ingress is set to external on backend app]

Actual behavior [CORS origin error. See above]

[tgram-3D]

I figured it out, I think. Misunderstood internal ingress apparently, assuming this is accurate: https://stackoverflow.com/questions/75949766/azure-container-apps-cors-issue.

I guess to do this sort of thing you need a proxy to forward the requests, which seems like is what's going on here with the express server:

https://github.com/Azure-Samples/container-apps-connect-multiple-apps/tree/main/with-fqdn

[anthonychu]

Proxying both the frontend and backend through a single domain is one way to get around CORS. You can also enable external ingress on both the frontend and backend apps, then enable CORS on the backend app.

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.