Astro Proxy

Leiten Sie usertrax über Ihre Astro-Anwendung. Wählen Sie Middleware (SSR) oder API-Routen (Static/Hybrid).

Middleware (SSR)
API-Routen (Static/Hybrid)

Server-Output aktivieren

import { defineConfig } from "astro/config";
import node from "@astrojs/node";

export default defineConfig({
  output: "server",
  adapter: node({ mode: "standalone" }),
});

Adapter installieren: npm install @astrojs/node

Middleware erstellen

const UPSTREAM_SCRIPT = "https://usertrax.io/cvs.js";
const UPSTREAM_EVENTS = "https://api.usertrax.io/api/events";

export async function onRequest(context, next) {
  const { request } = context;
  const url = new URL(request.url);

  if (url.pathname === "/cvs.js") {
    const response = await fetch(UPSTREAM_SCRIPT);
    const script = await response.text();

    return new Response(script, {
      headers: {
        "Content-Type": "application/javascript",
        "Cache-Control": "public, max-age=86400",
      },
    });
  }

  if (url.pathname === "/api/usertrax/events" && request.method === "POST") {
    const body = await request.text();

    const response = await fetch(UPSTREAM_EVENTS, {
      method: "POST",
      headers: {
        "Content-Type": request.headers.get("Content-Type") || "application/json",
        Accept: "application/json",
        "User-Agent": request.headers.get("User-Agent") || "",
        "X-Auth-Key": request.headers.get("X-Auth-Key") || "",
      },
      body,
    });

    return new Response(await response.text(), {
      status: response.status,
      headers: { "Content-Type": "application/json" },
    });
  }

  return next();
}

Layout anpassen

---
const { title } = Astro.props;
---

<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <script is:inline>
      window.usertraxConfig = { endpoint: "/api/usertrax/events" };
    </script>
    <script src="/cvs.js" data-key="IHR_API_SCHLÜSSEL" defer></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Script-Proxy-Route erstellen

export async function GET() {
  const response = await fetch("https://usertrax.io/cvs.js");
  const script = await response.text();

  return new Response(script, {
    headers: {
      "Content-Type": "application/javascript",
      "Cache-Control": "public, max-age=86400",
    },
  });
}

Events-Proxy-Route erstellen

export async function POST({ request }) {
  const body = await request.text();

  const response = await fetch("https://api.usertrax.io/api/events", {
    method: "POST",
    headers: {
      "Content-Type": request.headers.get("Content-Type") || "application/json",
      Accept: "application/json",
      "User-Agent": request.headers.get("User-Agent") || "",
      "X-Auth-Key": request.headers.get("X-Auth-Key") || "",
    },
    body,
  });

  return new Response(await response.text(), {
    status: response.status,
    headers: { "Content-Type": "application/json" },
  });
}

Layout anpassen (wie bei Middleware oben)

Verifizierung

Website besuchen
Network-Tab öffnen
Prüfen, dass Anfragen über Ihre Domain laufen

Fehlerbehebung

Middleware läuft nicht: output: "server" oder output: "hybrid" setzen
404 auf API-Routen: Dateinamen prüfen — src/pages/api/usertrax/events.js für /api/usertrax/events