CORS error while authorize application to call API Azure AD?

Question

Calling the API through fetch() in React but getting CORS error. https://login.microsoftonline.com/tenant_id/oauth2/v2.0/authorize?client_id=xxxxxxxxxxxxxxxxxxxxx&response_type=code&redirect_uri=http://localhost:3050&scope=user.Read.All&response_mode=query

Above URL has been made from Postman and working fine if pasted directly on the browser.

2.Is there a way to get code securely i.e get the response code in body and not in query?

Tried passing header in the fetch for Allow-access-origin to *.

Answer 1

We need to use msal in react to avoid CORS problems. Microsoft also provides some samples for react application, you can see this document. Here I tested this sample code. I also registered an azure ad application and set the redirect url http://locahost:3000, And here's my configuration:

enter image description here enter image description here

And as you can see in the App.jsx, it uses the code below to generate access token and call graph api with it, it's no need to show auth code in the browser because the token is acquired silently. I think this could meet your requirement.

function RequestProfileData() {
        // Silently acquires an access token which is then attached to a request for MS Graph data
        instance.acquireTokenSilent({
            ...loginRequest,
            account: accounts[0]
        }).then((response) => {
            callMsGraph(response.accessToken).then(response => setGraphData(response));
        });
    }

========================UPDATE==================

For your question 2, I think this may help you: