Azure Function Cors with AAD

Question

I'm having a strange problem with CORs on my Azure Functions App

I currently have an Azure Function App, that is secured by Azure Active Directory. This API the provides data to an authenticated SPA, written in Angular 7 and uses the MSAL (1.4.1) library for authentication. The SPA is hosted on an Azure Storage Accounts static website and is matched to a custom domain with a CDN.

I have a similar set up on 2 other sites and they work great, only difference is authentication, but I don't think that is the issue as I can login ok and access graph endpoints.

The site works great running locally but fails when I run in production (the static website).

This is my CORS page:

Yet this is my error:

Access to XMLHttpRequest at 'https://login.windows.net/GUID/oauth2/authorize?response_type=id_token&redirect_uri=https%3A%2F%2Forpheusapiv2.azurewebsites.net%2F.auth%2Flogin%2Faad%2[CODE]' (redirected from 'https://orpheusapiv2.azurewebsites.net/api/v2.0/FUNCTION_NAME') from origin 'https://orpheus.langladecapital.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Adding https://login.windows.net to the CORS list doesn't help and nor does just accepting a wildcard ("*")

Any ideas?

The issue is not CORS. Your Function is trying to redirect the AJAX request to AAD, which it should not do. Check the token you are sending is correct and check that the Function supports token-based authentication (not redirect-based authentication). — juunas
but its the same behaviour locally, I make the same authentication calls too AAD and the function but cors is an issue with the deployed version and not locally? There is literally no difference in the code — Chris A
That's because in Azure the Function App probably has Authentication/Authorization aka Easy Auth configured on it. It is redirecting the call. — juunas

Jim Xu Jim Xu · Accepted Answer · 2020-12-01T05:15:24

The CORS setting just can be used to fix the cors issue about calling Azure function from your single page application. But if you have configured App Service authentication for your Azure function app, you also face the cors issue about calling AD login URL from your single application. The setting cannot fix it. Regarding how to fix the issue, you can use Microsoft Authentication Library (MSAL) for JavaScript to integrate Azure AD into your single application. Then you can get access token and call Azure function. For more details, please refer to the blog.

Azure Function Cors with AAD

1 Answers