msal-react/msal-browser部署后无法触发登录，本地运行正常

• 本地通过npm run start运行时，登录功能完全正常；但部署到Azure Web App、Azure静态Web App，或是本地使用Azure静态Web App CLI运行时，出现异常。
• 调用instance.loginPopup()或instance.loginRedirect()时，无法触发弹窗或重定向，反而抛出错误：
  • 错误1：Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.
  • 错误2：Error: Interaction is currently in progress
• Cookie中的msal.interaction.status值始终为undefined

已严格按照微软官方示例开发，但无法定位仅在部署场景出现问题的原因，相关代码如下：

Index.tsx #

const msalInstance = new PublicClientApplication(msalConfig);
msalInstance.initialize().then(() => {
  console.log('Initialised!');

  if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
    msalInstance.setActiveAccount(msalInstance.getAllAccounts()[0]);
  } 

  msalInstance.enableAccountStorageEvents();

  msalInstance.addEventCallback((event: any) => {
    if (event.eventType === EventType.LOGIN_SUCCESS
      ||
      event.eventType === EventType.ACQUIRE_TOKEN_SUCCESS
      ||
      event.eventType === EventType.SSO_SILENT_SUCCESS
    ) {
      const account = event.payload.account;
      msalInstance.setActiveAccount(account);
    }
  });
})
.catch((err) => {
  console.log('Error');
  console.log(err);
})

AuthConfig.tsx #

export const msalConfig: Configuration = {
  auth: {
    clientId: process.env.REACT_APP_CLIENT_ID as string,
    authority: b2cPolicies.authorities.signUpSignIn.authority,
    knownAuthorities: [b2cPolicies.authorityDomain],
    redirectUri: process.env.REACT_APP_REDIRECT_URI,
    postLogoutRedirectUri: '/',
    navigateToLoginRequestUrl: false
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: isIE || isEdge || isFirefox
  },
  system: {
    allowNativeBroker: false, 
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
          default:
            return;
        }
      }
    }
  }
};

App.tsx #

function App({ msalInstance }: { msalInstance: PublicClientApplication }) {
  return (
    <MsalProvider instance={msalInstance}>
      <SignInSignOut />
      <div>
        Home
      </div>
    </MsalProvider>
  );
}

SignIn.tsx #

const SignIn = () => {
  const { instance } = useMsal();

  const logIn = () => {
    instance.loginRedirect();
  }

  return (
    <button onClick={logIn}>Sign In</button>
  )
};

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