React获取PowerBI AccessToken报CORS：无Access-Control-Allow-Origin

报错核心原因 #

你遇到的所请求的资源上不存在'Access-Control-Allow-Origin'标头报错，本质是浏览器同源策略的限制：微软https://login.microsoftonline.com/common/oauth2/token端点本身不支持浏览器前端直接发起跨域请求，该端点设计定位是服务端调用场景，不会返回跨域允许响应头。
你代码里注释掉的mode: 'no-cors'配置也无法解决问题：该模式下浏览器会拦截响应内容，你只能拿到不可读的不透明响应，根本无法解析出返回的access_token。
除此之外你的现有实现还有一个严重安全隐患：将client_secret硬编码在前端代码中，所有访问页面的用户都可以通过开发者工具拿到该密钥，直接导致你的Azure AD应用权限完全泄露。同时你使用的password授权模式本身也不支持前端跨域调用。

可行解决方法 #

方案1：后端代理中转（生产环境推荐） #

将获取令牌的逻辑迁移到自有后端服务，从根源绕开浏览器CORS限制：

• 前端不再直接请求微软OAuth端点，改为向自有同域后端接口发起请求
• 后端服务完成参数拼装后，向微软token端点发起请求获取access_token
• 后端将拿到的令牌返回给前端使用
  服务端之间的HTTP调用不受浏览器同源策略约束，同时client_secret存储在服务端，不会泄露给前端用户，是生产环境最稳妥的方案。

方案2：使用微软官方前端SDK走合规授权流 #

不要手写fetch直接调用token端点，使用微软官方为单页应用提供的认证库@azure/msal-browser，走支持跨域的PKCE授权码流或者隐式授权流：

1. 进入Azure AD后台，将你的应用重定向URI配置为「单页应用」类型，开启对应授权流支持
2. 前端安装MSAL依赖，初始化认证实例后，通过官方封装的方法获取PowerBI访问令牌
   最小化实现示例：

import { PublicClientApplication } from '@azure/msal-browser';

// 初始化MSAL实例
const msalInstance = new PublicClientApplication({
  auth: {
    clientId: "你的Azure AD应用客户端ID",
    authority: "https://login.microsoftonline.com/common",
    redirectUri: window.location.origin
  }
});
const powerbiScopes = ["https://analysis.windows.net/powerbi/api/.default"];

// 获取令牌方法
const fetchPbiToken = async () => {
  const currentAccount = msalInstance.getAllAccounts()[0];
  const tokenRes = await msalInstance.acquireTokenSilent({
    scopes: powerbiScopes,
    account: currentAccount
  });
  return tokenRes.accessToken;
}

方案3：开发环境临时代理（仅本地调试用） #

如果只是本地开发阶段快速调试，可以通过React开发服务器的代理能力转发请求，以Create React App搭建的项目为例：

1. 在项目package.json中添加配置：

"proxy": "https://login.microsoftonline.com"

2. 将前端fetch的请求地址改为相对路径/common/oauth2/token
   本地开发服务器会自动将该路径的请求转发到微软域名下，不会触发浏览器CORS校验。

注意：该方案仅在本地开发环境生效，生产环境部署后无效，同时依然存在client_secret泄露的风险，绝对不能用于生产环境。
不要尝试通过修改请求头、伪造来源等方式直接从前端调用微软的token端点，该端点从设计上就拒绝浏览器侧的直接跨域调用，所有这类尝试都无法正常拿到令牌。

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