CORS Issues When Using Partytown with Reverse Proxy in Nuxt + Bootstrap app

[pratik260297]

Hello,

I'm working on a NuxtJS app with Bootstrap and trying to implement Partytown. Initially, my setup was:

app: {
    head: {
      script: [
        {
          src: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js",
          tagPosition: "bodyClose",
         type: "text/partytown",
        },
        {
          src: `https://maps.googleapis.com/maps/api/js?key=${process.env.NUXT_PUBLIC_GOOGLE_MAP_KEY}&libraries=places`,
          tagPosition: "bodyClose",
          type: "text/partytown",
        },
      ],
    },
  },

[
      "@nuxtjs/partytown",
      {
        forward: ["dataLayer.push"],
        debug: process.env.NODE_ENV === "development",
      },
    ],

}

To resolve CORS issues, I set up a reverse proxy and updated my configuration:

head: {
      script: [
        {
          src: "/api/bootstrap",
          tagPosition: "bodyClose",
          type: "text/partytown",
        },
        {
          src: "/api/google-maps",
          tagPosition: "bodyClose",
          type: "text/partytown",
        },
      ],
    },

[
      "@nuxtjs/partytown",
      {
        forward: ["dataLayer.push"],
        resolveUrl: function (url, location) {
          if (url.hostname.includes("maps.googleapis.com")) {
            return new URL(location.origin + "/api/google-maps");
          }

          if (
            url.hostname.includes("cdn.jsdelivr.net") &&
            url.pathname.includes("bootstrap")
          ) {
            return new URL(location.origin + "/api/bootstrap");
          }

          return url;
        },
        debug: process.env.NODE_ENV === "development",
      },
    ],

reverse proxies:

export default defineEventHandler(async (event) => {
  const response = await fetch(
    "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js",
  );
  const data = await response.text();

  setResponseHeaders(event, {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "Content-Type, Authorization",
    "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE",
    "Content-Type": "application/javascript",
    "Cache-Control": "public, max-age=86400",
  });

  return data;
});

export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig();
  const apiKey = config.public.googleMapKey;

  const query = getQuery(event);
  const libraries = query.libraries || "places";

  const url = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=${libraries}`;
  const response = await fetch(url);
  const data = await response.text();

  setResponseHeaders(event, {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "Content-Type, Authorization",
    "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE",
    "Content-Type": "application/x-javascript; charset=utf-8",
    "Cache-Control":
      "public, max-age=5, s-maxage=5, stale-if-error=2678400, stale-while-revalidate=86400",
  });

  return data;
});

I'm still encountering CORS issues

[oooFreaKooo]

Same here. Isnt it because the script that you are using, needs to grant you access?