JavaScript调用MS Graph API获取刷新令牌遇跨域权限错误求助

核心问题原因 #

你遇到的错误本质是：浏览器端的跨域令牌兑换仅允许**单页应用(SPA)**类型客户端，且必须配合PKCE（Proof Key for Code Exchange）流程使用。如果前端直接调用/token端点，但配置的是Web应用类型凭据、未启用PKCE，就会触发该错误。

具体修复步骤 #

1. 修正Azure AD应用的配置 #

• 进入Azure门户的应用注册，切换到身份验证页面
• 只保留**单页应用(SPA)**类型的重定向URI，删除所有Web类型的重定向URI（如果是纯前端SPA）
• 无需勾选隐式授权和混合流选项（SPA用PKCE流程不需要此配置）

2. 使用官方MSAL库处理令牌流程 #

不要手动调用/authorize和/token端点，推荐用微软官方的msal-browser库，它会自动处理PKCE和跨域问题：

• 初始化MSAL实例时，确保redirectUri和Azure配置的SPA重定向URI完全一致
• 示例代码：

import * as msal from "@azure/msal-browser";

const msalConfig = {
    auth: {
        clientId: "你的客户端ID",
        authority: "https://login.microsoftonline.com/{TenantID}",
        redirectUri: "你的SPA重定向URI（如http://localhost:3000）"
    }
};

const msalInstance = new msal.PublicClientApplication(msalConfig);

async function getTokens() {
    const request = { scopes: ["user.read", "mail.send"] };
    try {
        // 登录获取授权码（自动兑换为令牌）
        const loginRes = await msalInstance.loginPopup(request);
        // 静默获取令牌（含刷新令牌）
        const tokenRes = await msalInstance.acquireTokenSilent({
            ...request,
            account: loginRes.account
        });
        console.log("Access Token:", tokenRes.accessToken);
        console.log("Refresh Token:", tokenRes.refreshToken);
    } catch (err) {
        console.error("令牌获取失败:", err);
    }
}

3. 若手动实现PKCE流程（不推荐） #

如果一定要手动写流程，必须：

• 调用/authorize时，生成code_verifier和code_challenge，传递code_challenge和code_challenge_method=S256参数
• 调用/token时，携带code_verifier参数，且不能传递client_secret（SPA应用无客户端密钥）

4. 有后端服务的场景处理 #

如果你的应用存在后端，应该由后端调用/token端点兑换令牌：

• 前端仅负责获取授权码，传递给后端
• Azure应用配置Web类型的重定向URI，后端调用/token时携带client_id和client_secret

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