React JS 中被 CORS 策略阻止

Question

我在开发 readjs 脚本时遇到困难。我在 Microsoft 创建了该应用程序，并且可以通过 Postman 进行访问。当我在react中实现它时，它返回错误：

访问 XMLHttpRequest 来自“https://login.microsoftonline.com/******/oauth2/v2.0/token” 来源“http://localhost:3000”已被 CORS 策略阻止：否“ Access-Control-Allow-Origin' 标头存在于请求中 资源

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

如果您要嵌入组织报告，请参阅React Samples。

如果您使用服务主体嵌入报告，请参阅我的 GitHub 存储库。

需要提供有关嵌入方式以及所使用的身份验证方法的更多详细信息，以获得所面临问题的适当答案。