Angular talks only to the main website domain. It never stores private backend credentials.
Angular · Nginx · FastAPI · Security
Recommended setup to keep an API out of the public frontend
When an Angular app talks directly to a backend, any credential embedded in the browser ends up exposed. The correct fix is not to hide the key better, but to move trust to the server side.
This guide describes the pattern we applied: Angular calls the main website domain, Nginx forwards the request to a private API, and FastAPI only accepts requests that carry an internal header injected by the proxy.
The central idea
A secret is only secret if it never reaches the browser. If Angular sends it, the secret is already lost.
1. Why the direct frontend login is a bad idea
A shared technical account inside a frontend bundle can be extracted from the compiled JavaScript, from the network panel or from the source itself. That means the backend is effectively public even if it asks for a token.
This is especially common when a frontend first requests a token with a fixed username and password and then uses that bearer token for all later requests.
2. The recommended architecture
The practical solution is to split the path into public frontend, trusted reverse proxy and protected API.
Nginx adds an internal header that only exists on the server side.
FastAPI rejects direct calls unless the internal header matches the expected secret.
The API still serves the website, but it is no longer directly usable by third parties just by opening DevTools.
3. Recommended Nginx flow
A clean way to expose the feature is to publish a dedicated route such as /api/internal-service/ on the main domain and proxy it to the API host.
server {
server_name example.com;
location ^~ /api/internal-service/ {
proxy_pass https://api-interna.example.com/;
proxy_http_version 1.1;
proxy_set_header Host api-interna.example.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Internal-Api-Key example.internal.key.please.change;
}
location / {
proxy_pass http://frontend_ssr;
}
}4. Backend validation in FastAPI
The backend should validate an internal header against an environment variable. The browser never knows that value; only Nginx does.
5. What Angular should do
Angular should call the proxied route on the public domain and remove any username, password, bearer bootstrap or technical token exchange.
In other words, Angular consumes the service, but it does not participate in the trust boundary.
6. How to verify that the setup is correct
The most useful confirmation is to test both paths: the public proxy route should work, while the direct private API route should return 403.
7. Deployment checklist
Use a long random INTERNAL_API_KEY in the backend environment.
Configure Nginx on the public domain to inject the same header value.
Keep the private API domain without that injected header.
Point Angular production to the proxied public route, not to the private API host.
Verify that the public proxy path returns 200 and the direct private API path returns 403.
Common mistakes
Injecting the same secret from Angular or storing it in environment files shipped to the browser.
Reusing an already occupied /api path instead of creating a dedicated namespace such as /api/crypto/.
Forgetting environment replacements and shipping localhost URLs to production.
Assuming CORS or hidden buttons are equivalent to backend protection.
When is this pattern recommended?
Use it when the website needs the API but you do not want to publish reusable credentials or allow direct third-party use of the same endpoint.
If the API is meant to be public by design, publishing it openly with strong rate limiting may be simpler. If the data is user-specific, then real user authentication is the correct solution.
Related note
If the endpoint only exposes public data, making it openly readable with rate limiting may be simpler. This proxy pattern is useful when you want the website to use the API but you do not want direct third-party use.