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};
};