Cloudflare Pages & apiKeys

Heya I am encountering an issue trying to get the request for my static website that was deployed to Cloudflare Workers to function and giving me errors my script. The error in the console on the page is VM1507:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

My file structure is:

-functions
--env.js
-Images
-Scripts
--gallery.js
-Styles
-index.html

The primary focus is env.js and gallery.js.

env.js:

async function onRequest(context) {
  const folderID = context.env.folderID;
  const apiKey = context.env.apiKey;

  const response = new Response(JSON.stringify({ folderID, apiKey }));
  response.headers.set("Content-Type", "application/json");

  return response;
}

gallery.js:

async function fetchImages() {
  try {
    const envResponse = await fetch("/functions/env");
    const { folderID, apiKey } = await envResponse.json();

    const imageDataResponse = await fetch(
      `https://www.googleapis.com/drive/v3/files?q=${folderID}+in+parents&key=${apiKey}&fields=files(id,name,mimeType,thumbnailLink,webContentLink)`
    );
    const imageData = await imageDataResponse.json();
    displayImages(imageData.files);
  } catch (error) {
    console.error("Error fetching env data:", error);
  }
}

function displayImages(files) {
  const gallery = document.getElementById("gallery");
  const slidesContainer = document.createElement("div");
  slidesContainer.id = "slides";
  gallery.appendChild(slidesContainer);

  files.forEach((file, index) => {
    if (file.mimeType.startsWith("image/")) {
      const img = document.createElement("img");
      img.src =
        file.thumbnailLink ||
        `https://drive.google.com/uc?export=view&id=${file.id}`;
      img.alt = file.name;
      img.classList.add("slide");
      if (index === 0) {
        img.classList.add("active");
      }
      slidesContainer.appendChild(img);
    }
  });
  addGalleryNavigation();
}

function addGalleryNavigation() {
  const slides = document.querySelectorAll(".slide");
  let currentIndex = 0;

  document.getElementById("nextBtn").addEventListener("click", () => {
    slides[currentIndex].classList.remove("active");
    currentIndex = (currentIndex + 1) % slides.length;
    slides[currentIndex].classList.add("active");
  });

  document.getElementById("prevBtn").addEventListener("click", () => {
    slides[currentIndex].classList.remove("active");
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    slides[currentIndex].classList.add("active");
  });
}

fetchImages();

I have tried putting a try catch for error handling and still getting the same error, I have also substituted the envData by hard coding in my apiKey and folderId variables back.