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