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!