@Saketh Nalla When authentication is enabled on your Azure Function App, the fetch request from your web component fails
However, manually opening the login URL in another tab authenticates the session, and the fetch starts working—indicating that the issue is tied to silent authentication and token propagation.
This behavior stems from how Azure App Service Authentication handles cross-origin requests:
EasyAuth expects the authentication token to be present in the request headers.
When the token is missing or invalid, it redirects to the login endpoint, which is blocked by CORS.
The browser cannot follow this redirect due to missing Access-Control-Allow-Origin headers from login.windows.net.
Use Token-Based Authentication via MSAL.js
Instead of relying on automatic redirects, use MSAL.js in your parent page to:
Acquire an access token silently using acquireTokenSilent.
Pass this token explicitly in the Authorization header of your fetch request:
const token = await msalInstance.acquireTokenSilent({
scopes: ["https://.azurewebsites.net/.default"]
});
fetch("https://.azurewebsites.net/api/your-function", {
method: "GET",
headers: {
"Authorization": Bearer ${token}
}
});
This avoids redirecting to login.windows.net and bypasses the CORS issue
Configure CORS Properly
Ensure the following in your Azure Function App:
Add the exact origin of your parent page (WxCC desktop) to the CORS list.
Avoid using "*" when authentication is enabled.
Confirm that OPTIONS preflight requests are handled correctly.
Enable Persistent Browser Sessions
This allows the user to remain signed in across tabs and sessions:
Configure this in Azure AD Conditional Access policies.
Use Federated Identity Credentials (FIC)
If your app is multi-tenant or needs cross-resource access, consider using Managed Identity with Federated Identity Credentials:
This avoids storing secrets and supports backend authentication.
I hope this helps in resolving the issue, do let me know if you have any further questions on this