Authorization header not getting passed to the backend

DeYung Q. Le 0

We have an Angular app that authenticates to our backend. Works in our own environment and locally but once it's deployed, the authorization header is removed. I've changed the authorization header to x-authorization and still no headers making it to the backend. We have the backend deployed as a container app, still doesn't work linked or unlinked to the static web app.

ajkuma 28,041 Reputation points Microsoft Employee

2024-09-16T05:00:51.0933333+00:00

DeYung Q. Le, To better assist you on this, could you please let us know if you are leveraging Azure Static WebApp ( or Azure App Service)? Kindly provide more details about your requirement to assist you better.
DeYung Q. Le 0 Reputation points

2024-09-16T06:21:02.1733333+00:00

We are using Azure Static Web App, our API is deployed to Container Apps
DeYung Q. Le 0 Reputation points

2024-09-16T06:21:42.13+00:00

Our Angular App is deployed to Azure Static Web App
DeYung Q. Le 0 Reputation points

2024-09-17T06:02:09.0533333+00:00

Not sure why my comment was deleted for violation when it only contains the details of the problem.

1 answer

ajkuma 28,041 Reputation points Microsoft Employee

2024-09-16T19:24:53.97+00:00

Based on my understanding of your issue description, you may check if the authorization header is being set correctly in your Angular app. You may do this by using the browser's developer tools to inspect the network traffic and see if the header is present in the request.

Kindly ensure if the backend is configured to accept the x-authorization header.

If you haven't checked, please checkout the docs:

Configure Azure Static Web Apps | configuration#routes
Authenticate and authorize Static Web Apps

Kindly let us know, I'll follow-up with you further.
Please sign in to rate this answer.
DeYung Q. Le 0 Reputation points

2024-09-17T05:46:05.8266667+00:00

I verified that the API running in Container Apps takes the X-Authorization headers. I verified that it works because I can run the Angular app locally and point it to the Container App endpoint and everything works fine. When the Angular app is deployed to Azure Static Web App, it doesn't work. In the developer tools, I can see that it's sending the POST payload to login, and sends an empty X-Authorization header, which is fine, but from the Console log in the Container App is shows that it's responding with a 403, I don't have any endpoints returning a 403, just 401 for invalid login and 400 for bad request.

I created a staticwebapp.config.json as the following

{ "navigationFallback": { "rewrite": "/index.html" }, "routes": [ { "route": "/api/*", "allowedRoles": [ "anonymous" ] }, { "route": "https://*.azurecontainerapps.io/api/*", "allowedRoles": [ "anonymous" ] } ] }

DeYung Q. Le 0 Reputation points

2024-09-17T06:00:35.8733333+00:00

Angular app is running in Azure Static Web Apps and making calls to an app running in Container Apps. When running the requests get a 403 response.

When I run the app locally pointing it to the container app url, it works fine.

I added the following to staticwebapp.config.json

{ "rewrite" }, "routes" { "route" "allowedRoles" "anonymous" ] }, { "route" "allowedRoles" "anonymous" ] } ], "responseOverrides" "401" "statusCode" "redirect" } } }

ajkuma 28,041 Reputation points Microsoft Employee

2024-09-17T20:31:15.6666667+00:00

Thanks for the follow-up and update. I have reached out to you privately for additional info on your Azure resource.

For the Q&A issue: your comment was undeleted and feedback has been shared internally.

Jeeva 21 Reputation points

2025-03-04T10:14:48.4333333+00:00

@ajkuma Please add the resolution for others to benefit. I am facing similar issue as well.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Authorization header not getting passed to the backend

1 answer

Your answer