Issue loading SOME images from s3 bucket to Next.JS app

Question

I am working on a web app and running into an issue loading images on my front end (Next.js) from a S3 bucket.

Currently, I have a lambda function getting pre-signed urls from the s3 bucket and feeding them back to my component for display. For some reason I am getting a massive amount of internal server errors when loading the page. It is mentioning CORS errors as well but I do not think that is a true CORS error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxxxxxxxx.execute-api.us-east-1.amazonaws.com/test. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 500

because some of the images are loading and they are all coming form the exact same location.

Here is the componenet that is loading the images:

export function Card({ category, directory }) {
    const [imageUrl, setImageUrl] = useState('');
    const [allImages, setAllImages] = useState([]);
    const [flipped, setFlipped] = useState(false);
    const fileName = "main.jpg";
    const prefix = `${category}/${directory}`;

    useEffect(() => {
        async function fetchImageUrls() {
            try {
                const response = await fetch("https://xxxxxxxxx.execute-api.us-east-1.amazonaws.com/test", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ prefix, fileName }),
                });
                const text = await response.text();
                const full = JSON.parse(text);
                const data = JSON.parse(full.body);
                setImageUrl(data.imageUrl);

                // Fetch all images in the folder
                if (data.allImages) {
                    setAllImages(data.allImages);
                }
            } catch (error) {
                console.error("Error fetching image URLs:", error);
            }
        }
        fetchImageUrls();
    }, [prefix, fileName]);

    return (
        <div className="card relative cursor-pointer" onClick={() => setFlipped(!flipped)}>
            <div className={`transform transition-transform duration-500 ${flipped ? 'rotate-y-180' : ''}`}>
                {!flipped ? (
                    <div className="front">
                        {imageUrl ? (
                            <img src={imageUrl} alt={directory} className="rounded-md shadow-sm" />
                        ) : (
                            <p>Loading...</p>
                        )}
                        <p className="card-title">{directory}</p>
                    </div>
                ) : (
                    <div className="back absolute inset-0 flex flex-col items-center justify-center bg-white p-4 rounded-lg shadow-md rotate-y-180">
                        <div className="grid grid-cols-2 gap-2">
                            {allImages.map((img, index) => (
                                <img key={index} src={img} alt={`${directory}-${index}`} className="w-16 h-16 rounded-md shadow-sm" />
                            ))}
                        </div>
                        <a href={`/contact?product=${directory}`} className="button-primary mt-4 px-4 py-2 rounded-lg text-white">Contact to Order</a>
                    </div>
                )}
            </div>
        </div>
    );
}

I am confused why some of the images are working but others are not. I have verified all the CORS settings are correct as per my other projects and like I said, most of the images load fine and the ones that don't load change each refresh.