React项目调用Microsoft OAuth接口遇CORS策略拦截问题求助

你的问题核心原因是：Microsoft的login.microsoftonline.com/token端点不支持前端跨域请求，且client_credentials授权流是专门给后端服务设计的，绝对不能在前端代码中直接使用——这会暴露你的client_secret，导致应用被盗用。Postman能正常请求是因为它是客户端工具，不受浏览器的CORS策略限制。

解决步骤 #

1. 后端中转请求（必须做） #

在你的后端服务（Node.js、Python、Java等）中实现一个中转接口，由后端去调用Microsoft的token端点，前端再请求自己的后端接口获取token。

以Node.js + Express为例：

const express = require('express');
const axios = require('axios');
const app = express();
const port = 5000;

app.post('/api/get-microsoft-token', async (req, res) => {
  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'
        }
      }
    );
    res.json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || { message: '请求失败' });
  }
});

app.listen(port, () => {
  console.log(`后端服务运行在端口 ${port}`);
});

2. 修改前端代码 #

前端不再直接调用Microsoft的端点，改为请求自己的后端接口：

const fetchData = async () => {
  try {
    const response = await axios.post(
      'http://localhost:5000/api/get-microsoft-token',
      {} // 无需传敏感参数，由后端处理
    );
    console.log(response.data);
    // 拿到token后，可填入PowerBIEmbed的accessToken字段
  } catch (error) {
    console.error('请求失败:', error);
  }
};

3. 可选：配置前端代理 #

如果不想处理跨域，可在React项目的package.json中添加代理配置，自动转发请求到后端：

"proxy": "http://localhost:5000"

之后前端只需请求/api/get-microsoft-token即可，无需写完整域名。

关键注意事项 #

• 绝对不要在前端代码中暴露client_secret，浏览器开发者工具能直接看到，会导致你的Microsoft应用被恶意使用。
• 如果是用户登录场景，建议使用Authorization Code Flow（带PKCE），而非client_credentials流，这才是前端应采用的安全授权方式。

内容的提问来源于stack exchange，提问作者Eduardo Santos