Fetching an url to an image from API results in a 302 error

I am making a website in which I load images and other data from an API that is owned by someone else. The data is received in json format.

The response looks a bit like this:

{
  ...
  "users": [
    {
      "name": "John Doe",
      "profile_image": "https://api.<url>/img/<id>",
      "date_created": "<date>",
      ...
    },
    ...
  ]
  ...
}

The issue I’m facing is that when I fetch these posts using JavaScript and want to use the profile_image as the src for an <img> tag, I sometimes (not always) get an response of 302 as supposed to the 200 I want, and the image won’t load as a result of that.

My JavaScript looks kinda like this (very simplified):

function fetchUsers() {
  return fetch(url)
    .then(response => response.json())
    .catch(error => console.log(error));
}

async function loadUsers() {
  let users = await fetchUsers()
  users.forEach(user => {
    userDiv.innerHTML += createUser(user);
  });
}

function createUser(user) {
  return `
    <div>
      <h3>${user.name}</h3>
      <img src="${user.profile_image}">
    </div>
  `;
}

When I follow the url I got from the API myself in the browser I get send to the image without any problems.

I suspect that it has to do with the fact that the image url seems to be linking to another API containing the images. I also noticed that in the DevTools console I see an error about Cross-Origin Read Blocking (CORB) blocking a cross-orign response.

Does anyone have experience with this problem and might be able to help?

Would be greatly appreciated!