CORS issue while accessing Azure function from SPFx Webpart

Question

I have created an Azure function that uses CSOM and Graph api to get site owner details. The Azure function is then triggered from a SPFx webpart. I was earlier using admin creds directly in the code for CSOM calls and hardcoded client id and client secret for Graph api. I had also added my tenant url in the 'Allowed Origin' it was working perfectly until now. However due to company policy i had to use 3rd party certificate for csom connection and instead of directly adding Graph api details i used key vault to generate secret and then use it in code. Now the issue started coming. When i run the azure function directly by running the url in browser it now redirects me to Microsoft login page and when enter my creds it shows me the response. Now when i run the url from my spfx webpart it starts giving me cors error as shown in the attached screenshot.

My understanding is that the azure function is redirecting to Microsoft Login page and that page is causing this error.

I also tried adding https://login.windows.net and https://login.microsoftonline.com in "Allow Origin" of CORS setting of the Azure function. Any idea how can i resolve this issue

Answer 1

This is an official document about obtaining certification through thumbprint in Azure function for your reference：
https://learn.microsoft.com/en-us/sharepoint/dev/solution-guidance/security-apponly-azuread#using-this-principal-in-your-application-and-make-use-of-the-azure-keyvault-to-store-the-certificate-and-retrieve-it-using-an-azure-function