CORS issue while getting token with Oauth 2.0 Client credential flow using just React?

Question

I am able to get the Bearer token from the postman.

https://login.microsoftonline.com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/oauth2/v2.0/token

client_id : <cient-id/app-id>,
scope : "https://graph.microsoft.com/.default",
client_secret:<client-secret>,
grant_type : "client_credentials"

Content-Type : "application/x-www-form-urlencoded"

but same thing when I am doing with React using Fetch() method it's giving me the CORS issue. I am using client_cerdentials flow using Oauth2.0.

Answer 1

It is not the flow or configuration that is causing the issue. The real issue is front-end or SPA. IF you want to call the API for getting token with client Credential flow,You must follow either of the two approaches that is a mandatory thing I guess.
1.Daemon Services
2.Server side Implementation
I have called the api with Node and with same configuration as mention in the docs its working fine now.
Thanks

Answer 2

You are getting cors error because AAD rejects the request when you include Origin header while using client_credentials. To start with You are using the client_credentials flow the wrong way.
Consider reading through this guide on client credentials flow to help you understand why its preferred for server side / daemon applications.

To see the error just add Origin header to postman and do the request again.

Also read here to understand the oauth2 flows that you can use

For your case, you can use authorization code flow