0

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? enter image description here

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

Sanjeev_gupta2812
  • 236
  • 2
  • 15
  • Please be descriptive while posting the question, can you provide the screenshot of request from Network Tab of browser. That would help alot to find the solution. – Pranil Tunga Apr 08 '21 at 07:38
  • Added screenshot. Thanks FYI, tried ammended headers requestHeaders.set('Content-Type', 'application/json; charset=utf-8'); requestHeaders.set('mode',"no-cors") requestHeaders.set('referrerPolicy','no-referrer'); // requestHeaders.set('Access-Control-Allow-Origin','http://localhost:3050/*') requestHeaders.set('Accept','/*') – Sanjeev_gupta2812 Apr 09 '21 at 08:20

1 Answers1

2

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:

enter image description here

Tiny Wang
  • 10,423
  • 1
  • 11
  • 29
  • If you feel my post is some of help to you, pls mark it as the answer, it will be of benefit to others who meet similar problems. And if you have further questions, pls feel free to update here, thanks in advance :) – Tiny Wang Apr 08 '21 at 09:52
  • Well I can use the MSAL interaction using user's credentials its working fine each and every thing. What I want is to access information from Azure AD without user login. Somewhat using Apps credentials and secret I want access token to get data. This is the scenario I want. But I think I am using a wrong approach just a gut feeling. Please help me how I can set up things. Thanks:) – Sanjeev_gupta2812 Apr 08 '21 at 12:06
  • Yes, thanks for response sir, and I have to say that azure ad provide several flows for different scenarios to generate access token including using client id and secret(client credential flow), this flow allows application to generate access token without user login, but it's only suitable for [daemon applications](https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-authentication-flows). But if you consider `nodejs`, I think [this answer](https://stackoverflow.com/a/66201951/15581227) could help you. – Tiny Wang Apr 08 '21 at 14:27
  • How do you think about this case? And did you have other questions? – Tiny Wang Apr 09 '21 at 06:11
  • Well I am just using React for handling and gettting data from API nodejs has not come into picture till now. I got a way to get the token wiht client credentials without calling /authorize we can just call /token with grant_type client credentials. It's working fine from postman and I am able to get the token but same with the Fetch() NO-CORS issue from browser. – Sanjeev_gupta2812 Apr 09 '21 at 06:45
  • Or Please if you can guide me how to achieve this with React web SPA. Thanks in advance:) @Tiny Wang – Sanjeev_gupta2812 Apr 09 '21 at 06:53
  • I had the same target as yours and I tried to use fetch() to achieve the same feature like postman but fail. And then I know I must use msal.js to obtain the token. And as you said you have a nodejs backend program, how do you think about generating the token in the backend? I mean that you may aslo call the api in the backend program and send the response data to your frontend application. – Tiny Wang Apr 10 '21 at 13:56
  • Well I don't have setup node till now for any of the purpose that is the last option i will be having. But for unauthorized users I didn.t find anything to get the token using MSAL with client credentials. If you know please share link regarding same thanks. – Sanjeev_gupta2812 Apr 12 '21 at 05:11
  • Hi you can not access the details because of browser security feature. But you can get the token from your app side and based on app permissions you can achieve the same. It worked for me – Mahesan Rv Nov 28 '21 at 23:45