I am exactly having this problem (What is the correct Redirect URI for Single Page App (SPA) runs inside a web browser for Oauth2 Auth Code Flow?)...

my backend is https://localhost:8081/

my redirected uri configured in azure is http://localhost:7170/call-back

I open the browser and try to login to https://localhost:8081. I get a default page where there is a button to click to get a token via PKCE flow (angular code for button click does this)

Azure replies with a code in http://localhost:7170/call-back?code=xxxx.

But angular app is not listening to 7170 and hence there is no one to handle the "code" and exchange it for "access_token". my code to get auth code i.e /authorize is:

const authUrl = `${this.authorizationEndpoint}?client_id=${this.clientId}
      &response_type=code
      &redirect_uri=${encodeURIComponent(this.redirectUri)}
      &scope=openid profile email
      &code_challenge=${codeChallenge}
      &code_challenge_method=S256`;

    // Redirect the user to Azure AD for login
    window.location.href = authUrl;

if i do window.location.href = authUrl, I get code back from azure ad but my angular app (started pointing at 8081) is lost and also there is no one listening to port 7170 to receive the token.