ReactJS集成Microsoft AD登录报错：跨域令牌兑换仅支持SPA客户端类型

使用ReactJS结合@azure/msal-browser实现Microsoft登录功能，其中一个应用正常运行，但另一个应用报错。

核心代码如下：

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

const msalConfig = {
  auth: {
    clientId: "bd0f7574-xxxx-xxxx-xxxx-xxxxxxx",
    authority:
      "https://login.microsoftonline.com/c6f6dd74-xxxxx-xxxx-xxxxx-xxxxxx",
    redirectUri: window.location.origin,
  },
};
const loginRequest = {
  scopes: ["openid", "profile", "User.Read"],
};

const msalInstance = new PublicClientApplication(msalConfig);

返回的错误信息：

ServerError: invalid_request: xxxxxxxxx - [2023-11-08 07:35:52Z]: AADSTSxxxxxxxxx: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type. Request origin: 'https://www.xxxx-ai.com'. Trace ID: 0e3d94c4-xxxxxxxxxxxxxxxxx Correlation ID: 13311371-xxxxxxxxxxxxxxxx Timestamp: 2023-11-08 07:35:52Z - Correlation ID: 13311371-xxxxxxxxxxxxxxxxx - Trace ID: 0e3d94c4-xxxxxxxxxxxxxxxxxxxxxxx

报错明确说明：跨域令牌兑换仅允许**单页应用(SPA)**客户端类型。问题出在Azure AD的应用注册配置中，出现错误的应用被设置为非SPA类型（比如Web应用），而msal-browser是专为SPA场景设计的库，不匹配的客户端类型会触发该限制。

• 登录Azure门户，定位到出现问题的应用注册
• 进入应用注册的认证页面
• 调整平台配置：
  • 若已添加“Web”类型平台，删除该配置项
  • 点击「添加平台」，选择「单页应用(SPA)」
  • 在「重定向URI」中填入和代码里redirectUri一致的地址（示例中为https://www.xxxx-ai.com）
• 保存所有更改后，重新测试登录功能

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