Blocked by CORS policy in React JS

Question

I'm having difficulty developing a readjs script. I created the application at Microsoft and access via Postman is working. When I implement it in react, it returns the error:

Access to XMLHttpRequest at 'https://login.microsoftonline.com/******/oauth2/v2.0/token' from origin 'http://localhost:3000' has been blocked by CORS policy: No ' Access-Control-Allow-Origin' header is present on the requested resource

import logo from './logo.svg';
import './App.css';
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';
import axios from 'axios';


function App() {

  const fetchData = async () => {
    try {
      const response = await axios.post(
        'https://login.microsoftonline.com/f47178f*****/oauth2/v2.0/token',
        'grant_type=client_credentials&client_id=*****ec97be119&scope=https%3A%2F%2Fgraph.microsoft.com%2F.default&client_secret=*****~lpwFCZ_Vfv4Mu2QvhW43rz.auh',
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
        }
      );
      console.log(response.data);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  fetchData();

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <PowerBIEmbed
          embedConfig={{
            type: 'report',   // Supported types: report, dashboard, tile, visual and qna
            id: 'd3229ac5-5501-42db-b45b-dcd76473161b',
            embedUrl: "",
            accessToken: "",
            tokenType: models.TokenType.Aad,
            settings: {
              panes: {
                filters: {
                  expanded: false,
                  visible: true
                }
              },
            }
          }}

          eventHandlers={
            new Map([
              ['loaded', function () { console.log('Report loaded'); }],
              ['rendered', function () { console.log('Report rendered'); }],
              ['error', function (event) { console.log(event.detail); }]
            ])
          }

          cssClassName={"Embed-container"}

          getEmbeddedComponent={(embeddedReport) => {
            window.report = embeddedReport;
          }}
        />
      </header>
    </div>
  );
}

export default App;

Answer 1

Refer to React Samples if you're Embedding report for organization.

If you're Embedding report using Service principal, Refer to my GitHub Repository.

Need to provide more details on the way you're embedding and which authentication method you're using to get appropriate answer for the issue facing.