Response to preflight request doesn't pass access control check: It does not have HTTP ok status. - Google Cloud Function, Vue3

I am attempting to make a web scraper using Google Cloud Functions. The GCF works as expected when fed input on the GCF test function area, however when triggering the GCF with an HTTP request from my clientside (coded in Vue3), I am getting the following CORS error: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

This is my HTTP request from the client-side,

const response = await fetch(url, {
          method: "POST",
          mode: "cors",
          headers: {
            "Content-Type": "application/json",
            "Allow-Control-Allow-Origin": "*",
          },
          body: JSON.stringify({ input }),
        });
        // console.log(response);
        const data = await response.json();

GCF Code

const puppeteer = require("puppeteer");

exports.webScrape = async (req, resp) => {
    resp.header("Access-Control-Allow-Origin", "*");
    resp.header("Access-Control-Allow-Credentials", "true");
    resp.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
    resp.header(
        "Access-Control-Allow-Headers",
        "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"
    );
    const input = req.body.input;
    async function scrapeSite(url) {
        //it does stuff here
    }
    try {
        const response = await scrapeSite(input);
        const data = await JSON.stringify(response);
        resp.send(data);
    } catch (error) {
        console.log("server is catching the error");
        console.log(error);
        resp.status(404).send({
            ErrorMessage: "An invalid URL was given to the input box, please check the input and try again",
            error,
        });
    }
    return;
};