msal-react TypeError：无法获取答案

【问题标题】：msal-react TypeError: Failed to fetchmsal-react TypeError：无法获取
【发布时间】：2021-02-27 00:20:19
【问题描述】：

我正在使用：

“@azure/msal-browser”：“^2.11.2”，
“@azure/msal-react”：“^1.0.0-alpha.6”

我的配置：

const configuration: Configuration = {
  auth: {
    clientId: CLIENT_ID,
    authority: `${AUTHORITY}${TENANT}`,
    redirectUri: window.location.origin,
  },
  cache: {
    cacheLocation: BrowserCacheLocation.LocalStorage,
  },
}

export const pca = new PublicClientApplication(configuration)

应用程序：

const authRequest = {
  scopes: [
    'openid',
    'profile',
    'User.Read'
  ],
}


const App = () => {
  return (
    <div>Nice</div>
  )
}

const app = (
  <MsalProvider instance={pca}>
    <MsalAuthenticationTemplate
      interactionType={InteractionType.Redirect}
      authenticationRequest={authRequest}
      errorComponent={ErrorComponent}
      loadingComponent={LoadingComponent}>
      <Router>
        <StrictMode>
          <App/>
        </StrictMode>
      </Router>
    </MsalAuthenticationTemplate>
  </MsalProvider>
)

重定向有效，我使用公司帐户登录，然后我将被重定向回本地主机。但：在控制台中收到以下错误：

TypeError: 获取失败

本地存储：

{"failedRequests":[865,"ac1b77cf-4d4f-4917-a0cf-6e9fdda4a8f3"],"errors":["TypeError: 获取失败"],"cacheHits":0}

并且 App 组件也不会呈现。 ErrorComponent 被渲染。

样本有同样的问题： https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/typescript-sample

我在网络中发现了 CORS 错误：请求网址：https://login.microsoftonline.com/******-aa2f-23**-****-************/oauth2/v2.0/token 这很奇怪，因为相同的重定向 url 适用于 react-adal。

我认为问题是由于错误的 Azure 应用配置：

清单：

{
"allowPublicClient": null,
"oauth2AllowIdTokenImplicitFlow": true,
"oauth2AllowImplicitFlow": true,
"oauth2Permissions": [],
"oauth2RequirePostResponse": false
}

oauth2AllowImplicitFlow 应该绝对是 false。

请问有人有清单的工作示例吗？

【问题讨论】：

标签： reactjs azure azure-active-directory msal react-aad-msal

【解决方案1】：

我几天前遇到了这个问题。

对我来说，问题在于注册应用程序的类型不正确。请尝试将应用程序注册为“单页”应用程序而不是“Web”应用程序，那么您应该不会看到此问题。

【讨论】：