Error "AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application" Angular

Question

I have a frontend angular application that I am running from localhost:4200 Call to token endpoint works fine in postman but fails in angular code with all required credentials, returning Status code 400 Error "AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application". Any help will be appreciated.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private accessToken: string;

  constructor(private http: HttpClient) {}

  getAccessToken(): string {
    return this.accessToken;
  }

  setAccessToken(token: string): void {
    this.accessToken = token;
  }

  authenticate(): void {
    // Replace 'YOUR_AUTH_SERVER_URL' with the actual URL of your authorization server
    const authServerUrl = 'YOUR_AUTH_SERVER_URL';
    const clientId = 'YOUR_CLIENT_ID';
    const redirectUri = window.location.origin;
    const responseType = 'code';
    const scope = 'openid profile'; // Replace with the required scopes

    const body = new URLSearchParams();
    body.set('client_id', clientId);
    body.set('redirect_uri', redirectUri);
    body.set('response_type', responseType);
    body.set('scope', scope);

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded'
      })
    };

    this.http.post<any>(authServerUrl, body.toString(), httpOptions).subscribe(
      (response) => {
        // Assuming the response contains the authorization code in the 'code' property
        const authorizationCode = response && response.code;
        if (authorizationCode) {
          this.exchangeCodeForToken(authorizationCode);
        } else {
          console.error('Invalid response format:', response);
          // Handle error or unexpected response format as per your application's requirements
        }
      },
      (error) => {
        console.error('Authentication error:', error);
        // Handle error as per your application's requirements
      }
    );
  }


  private exchangeCodeForToken(code: string): void {
    // Replace 'YOUR_TOKEN_SERVER_URL' with the actual URL of your token server
    const tokenServerUrl = 'YOUR_TOKEN_SERVER_URL';
    const clientId = 'YOUR_CLIENT_ID';
    const clientSecret = 'YOUR_CLIENT_SECRET'; // Only needed if your server requires it
    const grantType = 'authorization_code';

    const body = new URLSearchParams();
    body.set('client_id', clientId);
    body.set('code', code);
    body.set('grant_type', grantType);
    // Add client secret if needed
    if (clientSecret) {
      body.set('client_secret', clientSecret);
    }

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded'
      })
    };

    this.http.post<any>(tokenServerUrl, body.toString(), httpOptions).subscribe(
      (response) => {
        // Assuming the response contains the access token in the 'access_token' property
        const accessToken = response && response.access_token;
        if (accessToken) {
          this.setAccessToken(accessToken);
          // Optionally, you can redirect or perform other actions upon successful authentication.
        } else {
          console.error('Invalid response format:', response);
          // Handle error or unexpected response format as per your application's requirements
        }
      },
      (error) => {
        console.error('Token exchange error:', error);
        // Handle error as per your application's requirements
      }
    );
  }
}