500 (Internal Server Error) Error occurred while trying to proxy: localhost:8080/api/v2/canister/.../query

I ended up finding the solution of the issue. Below is a copy of the code that I use for instantiating the actor that is used to interact with the API. When Instantiating the backend actor, I made sure to specify https://icp-api.io as the host.

What I neglected to do was also specify https://icp-api.io as the host when instantiating the HttpAgent that is provided when instantiating the backend actor.

specifying https://icp-api.io as the host on instantiation the HttpAgent and on instantiation of the backend actor resolved the issue.

export const getLoginCredentials = async (anon) => {
  const authClient = await AuthClient.create();
  if(!anon)await new Promise((resolve, reject) => {
    authClient.login({
      onSuccess: resolve,
      onError: reject,
    });
  });
  const identity = authClient.getIdentity();
  const agent = new HttpAgent({ identity, host: "https://icp-api.io" });
  return {agent};
};


export const getBackendActor = async ({anon = false}) => {
    const {agent} = await getLoginCredentials(anon);
    let pd_api_canisterId;
    if(process.env.NODE_ENV === "development") pd_api_canisterId = canisterIds.pd_api.ic;
    else {
      let currentURL = getCurrentURL();
      let frontEndPrincipal = extractCanisterIdFromURL(currentURL);
      let pdUiCanister = pdUiFiles.createActor(frontEndPrincipal, {agentOptions: {host: "https://icp-api.io"}});
      let authorizedPrincipals = await pdUiCanister.list_authorized();
      pd_api_canisterId = authorizedPrincipals[0];
    }
    let actor = Actor.createActor(pdApiFiles.idlFactory, { agent, canisterId: pd_api_canisterId} );
    return {actor, agent};
  };