La API a la que mi proyecto está conectado devuelve una serie de objetos. Cada objeto tiene una propiedad URL para la fuente externa y configuro esta URL en la etiqueta de la imagen para cargar la imagen. Pero el problema aquí es que algunas de las URL están rotas o no son compatibles con CORS . Lo que se me ocurrió es escribir una función para recorrer la matriz, probar la URL de cada objeto y luego filtrar los rotos y no compatibles con CORS. Sin embargo, la API de búsqueda siempre rechaza inmediatamente la respuesta. ¿Es posible filtrar estos objetos en la parte delantera de alguna manera?

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