msal-react TypeError：无法获取

问题描述

我正在使用：

• "@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>
)

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

类型错误：无法获取

本地存储：

{"FailedRequests":[865,"ac1b77cf-4d4f-4917-a0cf-6e9fdda4a8f3"],"errors":["TypeError: Failed to fetch"],"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 肯定是假的。

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

解决方法

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

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