'Is it possible to filter out the fetched data points which are not cors friendly on the front end?

The API my project is hooked up to sends back an array of objects. Each object has a URL property to the external source and I set this URL to the image tag for loading the picture. But the catch here is that some of the URLs are either broken or not CORS-friendly. What I came up with is writing a function to loop over the array, test the url of each object and then filter out the CORS-unfriendly, broken ones. However, the fetch API always immediately rejects the response. Is it possible to filter out these objects on the front end by any means?

// The example of CORS-unfriendly and CORS-Friendly URLS
const data = [{
    url: "https://taiwan.taiwanstay.net.tw/twpic/79829.jpg",
    spotName: "A"
}, {
    url: "https://taiwan.taiwanstay.net.tw/twpic/5633.jpg",
    spotName: "B"
}]

const AJAX = async function(url, loadCount, {
    method
}) {
    try {
        const response = await fetch(url, {
            headers: getAuthorizationHeader()
        });
        const rawData = await response.json();
        if (method === "fetch") {
            return rawData;
        } else if (method === "add") {
            const first = RES_PER_CALL * (loadCount - 1);
            const last = RES_PER_CALL * loadCount;
            const data = rawData.slice(first, last);
            return data;
        }
    } catch (error) {
        throw error;
    }
};

// The functions below are called to loop over the fetched data and create the same number of image elements
preloadImg = function(result, index) {
    return new Promise((resolve, reject) => {
        const pageCountConst = (state.search.loadCount - 1) * RES_PER_CALL;
        result.img = new Image();
        result.img.onload = resolve;
        result.img.onerror = reject;
        result.img.alt = `Photo ${pageCountConst + index + 1}`;
        result.img.classList.add("card__image");
        result.img.src =
            result.Picture?.PictureUrl1 || "assets/main-sections/default-photo.png";
    });
};
const preloadImages = async function(results, add = true) {
    const first = add ? RES_PER_CALL * (state.search.loadCount - 1) : 0;
    const last = RES_PER_CALL * state.search.loadCount;
    return Promise.all(results.slice(first, last).map(preloadImg));
};


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source