I was wondering if something like this would be possible to achieve in a simple way, to receive the profile’s image and then just display it on an img tag.

I’m having issues with CORS while I do this axios request to get the profile images from instagram, I’m not sure if they block these requests or if I’m doing anything wrong, I would also not want to be connected with any user to get these requests, and I don’t want to have an express deployed, just as on client side request to get the profile image in the most righteous way

const smallImg = async (username) => {
        if (typeof username !== 'string') {
            throw new TypeError(`Expected a string, got ${typeof username}`);
        }
    
        const url = `https://www.instagram.com/${username}/`;
    
        try {
            const res = await axios.get(url);
            return res.data.split('"profile_pic_url":"')[1].split('",')[0] || '';
        } catch (error) {
            console.error(error.message);
            throw error;
        }
    };

const fetchProfilePictures = async () => {
            const usersToFetch = displayUsers.filter(
                (user) => !profilePictures[user.username]
            );

            const fetchPromises = usersToFetch.map(async (user) => {
                try {
                   
                    const imageUrl = await smallImg(user.username);
                    setProfilePictures((prev) => ({
                        ...prev,
                        [user.username]: imageUrl, 
                    }));
                } catch (error) {
                    console.error(
                        `Failed to fetch data for: ${user.username}`,
                        error
                    );
                    setProfilePictures((prev) => ({
                        ...prev,
                        [user.username]: "./images/avatar.jpg", 
                    }));
                }
            });

            await Promise.all(fetchPromises); 
        };