Unable to authenticate and do fetch to azure function endpoint from Microsoft SSO authenticated Frontend webcomponent

Question

Hello,

I've a simple JavaScript web component which is embedded inside a parent page (WxCC desktop) which I login using Microsoft SSO. In the web component, I'm doing a fetch to an azure function endpoint which returns a JSON. Everything works fine end-to-end when authentication is disabled. But when Authentication is enabled (as shown in below screenshot in my azure function), the web component is unable to successfully complete the fetch.

The error I get in console on the front-end is attached below. I've already configured my parent page under CORS in my azure function.

At this point when I open the GET login.windows.net/...... url in the same browser in another tab, without any prompt to login to Microsoft, the azure function return the JSON. And the frontend starts working normally again.

What do I've to do overcome this issue? I don't want the user interaction to either click the URL or having the user to enter credentials in Microsoft login page.